Центрирование все вертикально, в DIV/LI

Question

это может быть простым, до сих пор не могу понять это ...

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/

это не точно по центру на всех

Answer 1

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 2

как этот

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 3

http://jsfiddle.net/AvL9Y/9/

Плавающие элементы позволяет расположить их VERTIC в то время как текст выравнивается по середине вашего элемента, когда вы устанавливаете высоту строки (так что все, что вам нужно сделать, это установить высоту строки текстового контейнера любой высоты, которую вы хотите - 25 пикселей - это высота вашего изображения, я пошел для этого):

.myImage, .text { float: left; display: block; } 
.text { line-height: 25px; } 

Я слегка редактировали HTML для:

<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 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; 
}