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

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%);

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>