выравнивая изображение и текст рядный

Question

HTML код:

<ul> 
    <li><a href=#>Upload</a></li> 
    <li><a href=#>christin Bayes</a></li> 
    <li><img src="image/john.jpg" height="30" width="30"></li> 
    <li><a href=#>SignOut</a></li> 
</ul> 

CSS:

ul li 
{ 
    margin-left: 15px; 
    display: inline; 
    list-style: none; 
} 

я хочу, чтобы элементы списка (загрузка, имя, SignOut) совместив середину так же, как в фейсбуке. плз предложить мне

Answer 1

img { 
    vertical-align:middle; 
} 
​ 

Answer 2

попробовать это: DEMO

HMTL:

<ul class="MenuBar"> 
    <li><a href=#>Upload</a></li> 
    <li><a href=#>christin Bayes</a></li> 
    <li><img src="image/john.jpg" height="30" width="30" /></li> 
    <li><a href=#>SignOut</a></li> 
</ul>​ 

CSS:

.MenuBar 
{ 
    padding: 0px; 
    border: 1px solid #036; 
    font-size: 8pt; 
    height: 30px; 
} 

.MenuBar li 
{ 
    display: inline; 
    padding-left: 15px; 
    list-style:none; 
    height: 30px; 
} 

.MenuBar li img 
{ 
    vertical-align:middle; 
} 

Obviou вы можете удалить эту границу только для тестирования.

Answer 3

Попробуйте это. Может быть, это поможет вам:

ul{ 
    background: red; 
    height: 30px; 
} 
ul li{ 
    margin-left:15px; 
    display: table-cell; 
    list-style: none; 
    vertical-align: middle; 
    width: 90px; 
    text-align: center; 
} 

jsfiddle