aligning image and text inline

Question

html code:

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

i want the list items(upload,name,signout) aligning middle exactly like in facebook. plz suggest me

possible duplicate of [Text align vertical within li](http://stackoverflow.com/questions/8416628/text-align-vertical-within-li) — Diodeus - James MacFarlane, Jun 01 '12 at 15:42

score 1 · Answer 1 · edited Jun 02 '12 at 15:33

try this: 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;
}

Obviously you can choose to remove the border is only for testing.

score 0 · Answer 2 · answered Jun 01 '12 at 15:44

0

img {
    vertical-align:middle;
}

answered Jun 01 '12 at 15:44

j08691

204,283
31
260
272

score 0 · Answer 3 · edited Mar 11 '14 at 11:11

0

Try this. May be it helps you:

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

edited Mar 11 '14 at 11:11

Dirty-flow

2,306
11
30
49

answered Jun 01 '12 at 16:05

Xella

1,283
10
10

Please do not simply post a fiddle as an answer. Answers should **always** include relevant code – Liam Mar 11 '14 at 11:12

aligning image and text inline

3 Answers3