Vertically line up inline elements – align image on same line as text

Issue

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

Solution

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.

Answered By – Asad Rasheed

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published