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="https://via.placeholder.com/30" alt="small img" />   <span>Doesn't work.</span> </div>

Answer 1

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="https://via.placeholder.com/60x60">   <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="https://via.placeholder.com/60x60">     <span style="">Works.</span> </div>

Answer 2

Here are some simple techniques for vertical-align:

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> 

Multiple-lines vertical-align:bottom

Absolutely position an inner div relative to its container

<div style="position:relative;width:30px;height:60px;">   <div style="position:absolute;bottom:0">This is positioned on the bottom</div> </div> 

Multiple-lines vertical-align:middle

<div style="display:table;width:30px;height:60px;">   <div style="display:table-cell;height:30px;">This is positioned in the middle</div> </div> 

If you must support ancient versions of IE <= 7

In order to get this to work correctly across the board, you'll have to hack the CSS a bit. Luckily, there is an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div, you can achieve the same result. We can combine the two using another feature IE doesn't support: advanced CSS selectors.

<style type="text/css">   #container {     width: 30px;     height: 60px;     position: relative;   }   #wrapper > #container {     display: table;     position: static;   }   #container div {     position: absolute;     top: 50%;   }   #container div div {     position: relative;     top: -50%;   }   #container > div {     display: table-cell;     vertical-align: middle;     position: static;   } </style>  <div id="wrapper">   <div id="container">     <div><div><p>Works in everything!</p></div></div>   </div> </div> 

Variable container height vertical-align:middle

This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. (http://caniuse.com/#feat=transforms2d)

Applying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element:

position: relative; top: 50%; transform: translateY(-50%);