How to vertical align the following content without using table cell - html

Question

I have the following structure:
div {
display: table;
}
img {
display: table-cell;
}
span {
display: table-cell;
vertical-align: middle;
}
<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>
It seems to work but I want to know if there is an alternative without using table. If I don't use table and just use:
span {vertical-align: middle;}
It doesn't work!
I appreciate any help.

Answer 1

Vertically align the image and the span.
HTML
<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>
CSS
img,
span {
vertical-align:middle;
}
http://jsfiddle.net/dc2jn8vk/

Answer 2

MDN's docs on vertical-align states:
The vertical-align CSS property specifies the vertical alignment of an inline or table-cell box.
So, alternatively you could set the span to be a display: inline-block, and the property will work (if the span has a height defined)
div {
}
img {
}
span {
display: inline-block;
vertical-align: middle;
height: 100px;
}
<div>
<img src="http://placehold.it/200x100" /> <span>Test</span>
</div>

Answer 3

If you want to do away with the tables altogether. You can check out
display: inline-block;
By using this on the img & span you can set vertical alignment via std css.
Here is a codepen example: http://codepen.io/sixthcore/pen/pvdMyp
A quick notice to remove any white space in the stacking using this the hack is to use the font-size: 0px value on the surrounding div. This does mean that you will need to specify the font-size: for the span.
this solution does not require the usage of tables. Hope that helps.