CODEWITHSUNDEEP
htmlcss
user1038814
user1038814

Reputation: 9657

image in line with text

I have a table cell which has both text and an image icon in it. The image icon takes up the height of the cell, which makes the text drop to the bottom: enter image description here

Now, I want the text to position itself in the middle of the cell: enter image description here

Pray, how might I achieve this? The usual padding and margin fixes don't seem to work. My code is as follows:

<td class="title">
     <div style="display:inline-block;">Blah blah</div> 
      <a href="#"><img src="img.png" width="68" height="34" alt="Imange"></a>
</td>

Upvotes: 0

Views: 75

Answers (2)

Applecot
Applecot

Reputation: 249

Simply add vertical-align:middle as a style to your img tag, like so:

<td class="title">
 <div style="display:inline-block;">Blah blah</div> 
  <a href="#"><img src="img.png" width="68" height="34" alt="Imange" style="vertical-align:middle;"></a>

Upvotes: 0

Jacob
Jacob

Reputation: 78840

The key is to make your line-height the height of the image, then use vertical-align to adjust where the text lies vertically:

.title {
    line-height: 34px;
    vertical-align: middle;
}

Upvotes: 2

Related Questions