I am having trouble aligning my image vertically in the li tag.
This is what I currently have:
<nav id='tabs-wrapper'>
<ul id='tabs'>
<li><a href='index.html'><img id='btn' src='images/home.png'/></a></li><img class='vert'
src='images/vert2.png'/>
<li><a href='#'>Project</a></li><img class='vert' src='images/vert2.png'/>
<li><a href='test2.html'>Test</a></li><img class='vert' src='images/vert2.png'/>
<li><a href='#'>contact</a></li><img class='vert' src='images/vert2.png'/>
</ul>
CSS
nav #tabs{
float: left;
height: 46px;
}
nav #tabs .vert{
vertical-align: middle;
}
nav #tabs li{
display: inline-block;
height: 42px;
padding-right:15px;
padding-left:15px;
}
#tabs li:hover{
border-bottom:1px solid blue;
line-height:30px;
}
#tabs li a{
margin: 0 10px;
line-height: 48px;
vertical-align: middle;
}
#btn{
line-height: 48px;
vertical-align: middle;
}
Despite my efforts, the first li (which contains an image) refuses to align vertically with the rest of the list items. Can anyone offer some assistance?
Thank you.