Centering everything vertically, in DIV / LI - html

Question

this might be simple, still cant figure it out...
html
<ul>
<li>
<a href="/">
<div class="menuIcons">
<img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" height="25" alt="home icon"><span style="background-color: green;">Home</span>
</div>
</a>
</li>
</ul>
css
.menuIcons
{
display:table-cell;
background-color: red;
vertical-align: middle;
height: 40px;
}
li, img
{
padding: 0; margin: 0; border: 0;
}
li
{
background-color: yellow;
}
div
{
background-color: red;
}
http://jsfiddle.net/AvL9Y/1/
this is not precisely centered at all

Answer 1

http://jsfiddle.net/AvL9Y/9/
Floating elements allows you to position them vertically, while text gets aligned in the middle of your element when you set a line height (so all you need to do is set the line height of the text container to whatever height you want - 25px being the height of your image, I went for that):
.myImage, .text { float: left; display: block; }
.text { line-height: 25px; }
I've slightly modified your HTML to:
<ul>
<li>
<a href="/">
<div class="menuIcons">
<img class="myImage" src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" height="25" alt="home icon" /><div class="text" style="background-color: green;">Home</div>
</div>
</a>
</li>
</ul>

Answer 2

http://jsfiddle.net/AvL9Y/18/
HTML:
<ul>
<li>
<a href="/">
<div class="menuIcons">
<div class="wrapper">
<img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg"width="25" height="25" alt="home icon" />
<div class="text">Home</span>
</div>
</div>
</a>
</li>
<li>
<a href="/">
<div class="menuIcons">
<div class="wrapper">
<img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg"width="25" height="25" alt="home icon" />
<div class="text">Home</span>
</div>
</div>
</a>
</li>
CSS:
.menuIcons
{
display:table-cell;
background-color: red;
vertical-align: middle;
height: 40px;
}
.wrapper{
display:table;
}
li,img{
display:table-cell;
vertical-align: middle;
}
.text{
background-color: green;
display:table-cell;
vertical-align: middle;
}
li
{
background-color: yellow;
height: 50px;
}
div
{
background-color: red;
}

Answer 3

LIke this
demo
css
.menuIcons {
display: table-cell;
background-color: red;
vertical-align: middle;
height: 40px;
background-color: yellow;
}
li, img {
padding: 0;
margin: 0;
border: 0;
vertical-align: middle;
text-align: center;
}
li {
list-style-type: none;
vertical-align: middle;
display: inline-block;
overflow: hidden;
margin: 0 3px;
}
a {
display: block;
}
div {
background-color: red;
vertical-align: middle;
}
span {
vertical-align: middle;
display: block;
}

Answer 4

Try This
<ul>
<li> <a href="/"> <span class="menuIcons">
<img src="http://prog.hu/assets/site/text/quicknews/03418/silverlight-boot-by-yanomami--dyn--focus.jpg" width="25" align="center" height="25" alt="home icon"><span style="background-color: green;">Home</span>
</span>
</a>
</li>
</ul>
CSS
.menuIcons
{
display:table-cell;
background-color: red;
list-style-type: none;
vertical-align: middle;
height: 40px;
}
li, img
{
padding: 0; margin: 0; border: 0;
}
li
{
display:block;
vertical-align:middle;
background-color: yellow;
}
div
{
background-color: red;
}