我一直在尝试让我的导航栏元素的文本居中垂直对齐，但似乎做不到。
这是我一直在使用的 Bootstrap : http://pastebin.com/PKd2iJeJ
下面是我当前的CSS样式文件:
body {
background-color: #FFF;
}
#pageHeaderTop {
background-color: #FFFFFF;
width:100%;
border-bottom-style: solid;
border-width: 1px;
border-color: #D1D1D1;
height: auto;
}
#pageHeaderBottom {
background-color: #D1D1D1;
width:100%;
border-top-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.logoHeader {
width: 1200px;
text-align: left;
padding: 20px;
}
.nav {
width: 1200px;
}
.nav a {
color: #5A5A5A;
font-size: 11px;
font-weight: bold;
/* 10px top & bottom 14px left and right*/
padding: 10px 14px;
text-transform: uppercase;
}
.nav li {
display: inline;
}
#pageContent {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}
.contentArea {
text-align: left;
margin-left: 24px;
}
#pageFooter {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}
非常感谢任何帮助。我对 Web 开发还很陌生，所以如果您能用通俗易懂的术语进行解释，那就太好了!
最佳答案
有几个问题。 Bootstrap 为 ul 添加了 10px 的底部边距。您可以删除底部边距并使用 line-height 垂直对齐 ul 内的 li
请参阅此代码段:
body {
background-color: #FFF;
}
#pageHeaderTop {
background-color: #FFFFFF;
width:100%;
border-bottom-style: solid;
border-width: 1px;
border-color: #D1D1D1;
height: auto;
}
#pageHeaderBottom {
background-color: #D1D1D1;
width:100%;
border-top-style: solid;
border-width: 1px;
border-color: #FFFFFF;
}
.logoHeader {
width: 1200px;
text-align: left;
padding: 20px;
}
.nav {
width: 1200px;
height: 30px;
}
.nav a {
color: #5A5A5A;
font-size: 11px;
font-weight: bold;
/* 10px top & bottom 14px left and right*/
padding: 10px 14px;
text-transform: uppercase;
}
.nav-ul {
margin-bottom: 0;
}
.nav li {
display: inline-block;
height: 30px;
line-height: 30px;
}
#pageContent {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}
.contentArea {
text-align: left;
margin-left: 24px;
}
#pageFooter {
border:#999 1px solid;
border-top: none;
background-color:#F4F4F4;
width:1200px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<title>Rapid Codes - Get It Now!</title>
<link href="style/bootstrap.css" rel="stylesheet">
<link href="style/style.css" rel="stylesheet">
<body>
<div align="center" id="mainWrapper">
<div id="pageHeaderTop">
<div class="logoHeader">
<img src="http://www.rapidcodes.co.uk/style/NewLogo.png" width="400" height="50" alt="Logo"/>
</div>
</div>
<div id="pageHeaderBottom">
<div class="nav">
<ul class="pull-left nav-ul">
<li><a href="http://rapidcodes.co.uk">Home</a></li>
<li><a href="xbox.php">Xbox</a></li>
<li><a href="playstation.php">PlayStation</a></li>
</ul>
<ul class="pull-right">
<li><a href="contact_us.php">Contact Us</a></li>
</ul>
</div>
</div>
<div id="pageContent">
<div class="contentArea">Test</div></div>
<div id="pageFooter">© 2015 Rapid Codes</div>
</div>
</body>
</html>关于html - 导航栏文本元素未垂直对齐 (CSS/Bootstrap)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31763999/