How to use vertical-align: middle; properly?
- by Andrew
I want to have my list (nav) align to the center of an image (logo). I tried using vertical-align: middle;, but I couldn't get it to work when I floated the images left and right.
Here's my code:
HTML:
<div id="head">
<img id="logo" src="logo.png" />
<ul id="nav">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
</ul>
</div>
CSS:
#head {
margin-top: 2px;
width: 100%;
}
#logo {
float: left;
}
ul#nav {
float: right;
}
ul#nav li {
display: inline;
list-style-type: none;
}
I took all the vertical-align: middle;'s from where I put them (I tested it in each element, even though it was only supposed to be applied to #logo, from what I've read.)
Anyways, any help would be appreciated.
