在导航栏中居中文本答案

【问题标题】：Center text in navigation bar在导航栏中居中文本
【发布时间】：2012-07-18 23:58:58
【问题描述】：

我无法将导航栏中的文本对齐到其容器内的中心（垂直）。

导航栏的 HTML：

<ul class="navigation">
            <li class="navbar"><a href="index.html" class="navbarlink" >Home</a></li>
            <li class="navbar"><a href="second.html" class="navbarlink">About</a></li>
            <li class="navbar"><a href="index.html" class="navbarlink">Portfolio</a></li>
            <li class="navbar"><a href="index.html" class="navbarlink">Contact</a></li>
        </ul>

导航栏的CSS：

.navigation {
background:#1841c8 url(Navigation/Navigation/nav_background.png);
height:40px;
margin-bottom:0px;
display:block;
}

.navigation .navbar .navbarlink{
color:#FFFFFF;
background:gray;
display:block;
}

.navigation .navbar .navbarlink:hover{
color:#00CCFF;
background: url(Navigation/Navigation/nav_hover.png);
text-decoration:none;
    }

谁能告诉我我的 CSS 中缺少哪个属性？

【问题讨论】：

stackoverflow.com/questions/1101827/…
您可能想先删除 .navigation 上的 height:40px 。
克苏鲁我去看看。 @Billy Moat 导航上的 40 像素是为了让我的背景适合。
好吧，乔纳斯，我只是认为你拥有的链接数量可能非常紧张。如果您可以发布指向您的页面的链接或制作一个 sjfiddle，那就太好了。
顺便说一句，您似乎没有关闭任何 EM 标签。此外，我认为您可以使用这些 em 标签或 B 标签实现您想要做的事情。在 LI 元素上使用您的主要背景，并在 LI 悬停时交换它们。并将您的个人图标作为 A 标签的背景。希望这是有道理的，并且可以帮助您稍微整理一下代码。关于居中文本，我总是简单地使用带有 A 标签的 padding-top。

标签： html css text alignment

【解决方案1】：

尝试删除 .navigation 上的 margin-bottom:0 并改为放置 margin:50% 0 50% 0;

【讨论】：