Question

我一直试图让我的导航栏元素的文本在中心垂直对齐，但似乎无法做到。

这是我一直在使用的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;
}

非常感谢任何帮助。我对网络开发还是比较陌生的，所以如果你能用外行的话来表达，那就太好了！

Answer 1

有一些问题。 Bootstrap向ul添加10px底部边距。您可以移除该下边距，并使用line-height在li内垂直对齐ul 请参阅此代码段：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: