我想创建一个导航栏,它在其父div内垂直对齐。这里是我的代码:在一个div内导航的垂直对齐
div#banner {
background-color: green;
height: 100px;
}
div#title {
float: left;
width: 300px;
color: white;
font-size: 20px;
}
nav#menu {
display: inline-block;
vertical-align: middle;
padding: 0px;
margin: 0px font-size: 20px;
text-align: center;
}
nav#menu ul {
background-color: red;
padding: 0px;
margin: 0px;
list-style: none;
display: inline;
}
nav#menu ul li {
padding: 0px;
margin: 0px;
display: inline;
vertical-align: middle;
}
nav#menu ul li a {
padding: 0px;
margin: 0px;
width: 60px;
display: inline-block;
color: white;
}
<div id="banner">
<div id="title">
<h1>The Title</h1>
</div>
<nav id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
要尽量使“菜单”中的“标题”内垂直排列的,我给了“菜单”,“显示:inline-block的”,并且“ vertial-align:middle“。
但是,菜单显示在周围div的顶部,而不是在中间。
我应该改变什么?