Ich möchte eine Navigationsleiste erstellen, die vertikal innerhalb des übergeordneten div ausgerichtet ist. Hier ist mein Code:Vertikale Ausrichtung eines Nav innerhalb eines 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>
Um zu versuchen, die "Menü" zu machen, vertikal innerhalb der "Titel" ausgerichtet ist, habe ich das "Menü" "display: inline-block" und " vertical-align: Mitte ".
Das Menü wird jedoch am oberen Rand des umgebenden Bereichs und nicht in der Mitte angezeigt.
Was soll ich ändern?