导航栏文本元素未垂直对齐（CSS / Bootstrap）

Question

我一直在尝试使导航栏元素的文本在中心垂直对齐，但似乎做不到。

这是我一直在使用的引导程序： 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开发的新手，所以如果您能以通俗易懂的方式进行解释，那就太好了！

Answer 1

有几个问题。 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>

导航栏文本元素未垂直对齐（CSS / Bootstrap）

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-08-01 17:33:19

导航栏文本元素未垂直对齐（CSS / Bootstrap）

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-08-01 17:33:19

解决方案1
0 已采纳 2015-08-01 17:33:19