Why won't vertical-align: middle
work? And yet, vertical-align: top
does work.
<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
Why won't vertical-align: middle
work? And yet, vertical-align: top
does work.
<div>
<img style="width:30px;height:30px">
<span style="vertical-align:middle">Doesn't work.</span>
</div>
On a button in jQuery mobile, for instance, you can tweak it a bit by applying this style to the image:
The technique used in the accepted answer works only for single-lined text (demo), but not multi-line text (demo) - as noted there.
If anyone needs to vertically center multi-lined text to an image, here are a few ways (Methods 1 and 2 inspired by this CSS-Tricks article)
Method #1: CSS tables (FIDDLE) (IE8+ (caniuse))
CSS:
Method #2: Pseudo element on container (FIDDLE) (IE8+)
CSS:
Method #3: Flexbox (FIDDLE) (caniuse)
CSS (The above fiddle contains vendor prefixes):