如何使导航栏之间的文本居中
如何使导航栏之间的文本居中
提问于 2014-07-12 11:40:49
我一直在同时学习htm，css和php。我正在创建一个触摸所有这些东西的网站。它仅用于教育目的。
我怎样才能让我的网站名称在导航文本旁边居中。就像现在，我在导航栏中有网站名称，旁边有导航文本，但导航文本不在行的中心，它有点低。以下是该网站：http://66.172.10.179/resolver/
CSS：
/* Body */
body {
background-color: #FF5930;
margin: 0px;
}
a {
text-decoration: none;
color: white;
}
/* Navigation bar */
header {
background-color: #FF4719;
padding: 5px 0 8px 15px;
}
header nav h2 {
display: inline;
font-family: sans-serif;
}
header nav ul {
display: inline;
}
header nav ul li {
display: inline;
padding: 0 5px;
font-size: 15px;
font-family: sans-serif;
color: white;
height: 10px;
}
header nav ul li:hover {
}HTML：
<header>
<nav>
<h2><a href="index.php">Skype Resolver</a></h2>
<ul>
<li><a href="index.php">Resolver</a></li>
<li><a href="blacklist.php">Blacklisting</a></li>
<li><a href="purchase.php">Purchase API</a></li>
<li><a href="dtools.php">Domain tools</a></li>
<li><a href="stools.php">Spam tools</a></li>
<li><a href="mtools.php">Misc tools</a></li>
</ul>
</nav>
</header>回答 2
Stack Overflow用户
发布于 2014-07-12 12:04:44
我给H2添加了行高，为导航创建了一个CSS的东西，并添加了: display: inline-block；
像护身符一样工作！
Stack Overflow用户
发布于 2014-07-12 13:14:49
要在不实际输入任何行高的情况下实现这一点，您可以添加以下代码：
CSS
nav{
display:table;
}
nav h2 {
vertical-align: middle;
}
nav ul{
vertical-align: middle;
}这将使您的文本垂直居中，而您不必猜测行高...
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24709417
复制相关文章
相似问题
腾讯云开发者
