<li> align image and text middle

Get Started
1

I have the following HTML

<li><a href=“#”><img src=“/images/admin/menu/config.gif” />Milk</a>
<ul>
<li><a href=“#”>Goat</a></li>
<li><a href=“#”>Cow</a></li>
</ul>
</li>

AND CSS:

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
width: 260px;
font-size: 11px;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
}

#navcontainer li { margin: 0; }

#navcontainer a
{
display: block;
color: #FFF;
background-color: #036;
width: 260px;
/* padding: 3px 12px 3px 8px; */
padding: 13px 0; */
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: bold;
vertical-align:middle;

}

#navcontainer a:hover
{
background-color: #369;
color: #FFF;
}

#navcontainer li li a
{
display: block;
color: #FFF;
background-color: #69C;
width: 260px;
padding: 3px 3px 3px 17px;
text-decoration: none;
border-bottom: 1px solid #fff;
font-weight: normal;
}

#navcontainer li li a:hover
{
background-color: brown;
}

where i have this:

<li><a href=“#”><img src=“/images/admin/menu/config.gif” />Milk</a>

i want the image and text both to be aligned in the middle of the <li> but whenever i add an image to <li> text “Milk” appears at the bottom of the li right next to the image and is not aligned-vertically middle.

please help

2

Add:

#navcontainer a img {
	vertical-align: middle;
}