Vertically Align Text Next to an Image?

Question

Why won't vertical-align: middle work? And yet, vertical-align: top does work.

span{
  vertical-align: middle;
}

<div>
  <img src="" alt="small img" />
  <span>Doesn't work.</span>
</div>

Accepted Answer

Actually, in this case it's quite simple: apply the vertical align to the image. Since it's all in one line, it's really the image you want aligned, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="">
  <span style="">Works.</span>
</div>

Tested in FF3.

Now you can use flexbox for this type of layout.

.box {
   display: flex;
   align-items:center;
}

<div class="box">
    <img src="">
    <span style="">Works.</span>
</div>

Answer 2

Here are some simple techniques for vertical-align:

Must Read

One-line vertical-align:middle

This one is easy: set the line-height of the text element to equal that of the container

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Robert Thorne

Automotive & Future Transportation Editor

Robert Thorne covers electric vehicle innovations, autonomous driving systems, global mobility trends, and automotive engineering developments.

Share this article

Twitter Facebook Pinterest

Vertically Align Text Next to an Image?

26 Answers

Must Read

One-line vertical-align:middle

Robert Thorne