CODEWITHSUNDEEP
htmlcss
BumbleB2na
BumbleB2na

Reputation: 10763

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

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

Upvotes: 0

Views: 5347

Answers (2)

SofosF.
SofosF.

Reputation: 89

Vertically align emoji with text

vertical-align didn't work for me.

What worked for me was:

<h3 class="title"><span class="emoji">👉 </span> Some text here</h3>

  • In HTML: having the emoji wrapped in a span

  • in CSS:

      // on parent (i.e h3 or p)
  display: inline-flex 

  // on emoji wrapper span
  align-self: center;
  margin-top: -10px; // adjust this

You probably have to adjust margin-top value based on your font, line-height etc.

Hope it helps.

.list-title {
  display: inline-flex;
}

.emoji {
  align-self: center;
  margin-top: -10px; // adjust margin-top to your needs
}
<h3 class="list-title"><span class="emoji">👉 </span> Some text here</h3>
<br>
<p class="list-title"><span class="emoji">👉 </span> Some text here</p>

Upvotes: 0

Asad Rasheed
Asad Rasheed

Reputation: 518

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.

Upvotes: 4

Related Questions