Question

Having trouble vertically lining up inline elements – I want the email image to line up with text on the same line and without causing adverse effects on the flow of sibling elements:

JSFiddle

HTML:

<p><span class="purple">phone:</span> 123.123.1234</p>
<p><span class="green">email:</span> <img src="http://www.illuminart.com/tests/img/email.png" alt="" style="width:172px; height:13px" /></p>
<p><span class="purple">phone:</span> 123.123.1234</p>

CSS:

body {
    font-family: Verdana, Tahoma, Arial;
    font-size: 10pt;
}
p {    
    line-height: 15px;
}
span {}
img {}

Update: setting the img to vertical-align:middle and changing the line-height from ‘px’ to ’em’ seemed to work better.

CSS:

body {
    font-family: Verdana, Tahoma, Arial;
    font-size: 10pt;
}
p {    
    line-height: 1.4em;
}
span {}
img { 
    vertical-align: middle;
}

Answer 1

check out this:http://jsfiddle.net/c8C8C/1/. do you want this?

I just only add vertical-align:middle in your img tag style attribute.