如何在导航栏中垂直居中文本？
Posted
技术标签:
【中文标题】如何在导航栏中垂直居中文本？【英文标题】：How do I Vertically Center Text in My Navigation Bar? 【发布时间】：2014-09-10 14:41:27 【问题描述】：html：
<body>
<div class = "container">
<div class = "nav">
<ul class = "pull-left">
<li><a class = "brand" href = "/">New York Guide</a></li>
</ul>
<ul class = "pull-right">
<li><a href = "#">Sign Up</a></li>
<li><a href = "#">Log In</a></li>
<li><a href = "#">Help</a></li>
</ul>
</div>
</div>
</body>
CSS：
.nav li
display: inline;
.nav a
color: white;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
.nav
background-color: #7f7f7f;
目前，我的导航栏文本靠近灰色栏的顶部。有没有办法让它在酒吧垂直居中？
我需要使用填充或边距标签吗？还是完全不同的东西？
【问题讨论】：
【参考方案1】：您的 UL 元素添加了一个由 bootstrap 生成的 margin-bottom 属性。定位您的 UL 并将边距重置为 0。
.nav ulmargin:0;
另外，将链接的填充固定为相等，并使它们显示为内联块：
.nav a padding: 10px 10px; display:inline-block;
Working example
【讨论】：
【参考方案2】：它垂直居中但没有填充。您可以通过向 .nav 添加填充来添加空间
.nav
background-color: #7f7f7f;
padding: 10px 0;
【讨论】：
【参考方案3】：使用vertical-align:middle。
.nav a
color: white;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
vertical-align:middle;
display: inline-block;
也添加重置
.nav ulmargin:0;
【讨论】：
以上是关于如何在导航栏中垂直居中文本？的主要内容，如果未能解决你的问题，请参考以下文章