How to vertically align text with image?

Question

为什么 vertical-align: middle 不起作用？然而， vertical-align: top 确实有效。

span{
  vertical-align: middle;
}

<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

Here are some simple techniques for vertical alignment:

Single line vertical alignment: middle

This is simple: set the line height of the text element equal to the line height 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 the 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 older versions of IE <= 7<= 7

In order for this to fully work properly, you must make some modifications to the CSS. Luckily, there's an IE bug that works in our favor. Setting top:50% on the container and top:-50% on the inner div gives the same result. We can combine the two using another feature that 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 because it uses the transform:translateY attribute. (http://caniuse.com/#feat=transforms2d)

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

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

Answer 2

Actually, in this case, it's very simple: apply vertical alignment to the image. Since everything is on one line, you're actually aligning the image, not the text.

<!-- moved "vertical-align:middle" style from span to img -->
<div>
  <img style="vertical-align:middle" src="https://via.placeholder.com/60x60" alt="A grey image showing text 60 x 60">
  <span style="">Works.</span>
</div>