如何在導航欄中垂直居中顯示文本？
[英]How do I Vertically Center Text in My Navigation Bar?
問題描述
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;
}
目前，我的導航欄的文本靠近灰色條的頂部。 有沒有辦法在欄中垂直居中？
我需要使用填充或邊距標簽嗎？ 或完全不同的東西？
3 個解決方案
解決方案1
3 已采納 2014-07-19 16:14:00
您的UL元素具有由bootstrap生成的附加margin-bottom屬性。 定位您的UL並將邊距重置為0。
.nav ul{margin:0;}
此外，修復鏈接的填充是相等的，並使它們顯示為內聯塊：
.nav a {padding: 10px 10px; display:inline-block;}
解決方案2
1 2014-07-19 16:08:20
使用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 ul{margin:0;}
解決方案3
1 2014-07-19 16:17:53
它垂直居中，但沒有填充。 您可以通過向.nav添加填充來添加空間
.nav {
background-color: #7f7f7f;
padding: 10px 0;
}
如何垂直居中導航欄？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.