¿Por qué no funciona "vertical-align: middle"? Y sin embargo, alineación vertical: superior
*funciona.
begin snippet: js hide: false console: true babel: false -->
span{
vertical-align: middle;
}
<div>
<img src="http://lorempixel.com/30/30/" alt="small img" />
<span>Doesn't work.</span>
</div>
Fin del fragmento;
En realidad, en este caso es bastante sencillo: aplicar la alineación vertical a la imagen. Como está todo en una línea, en realidad es la imagen la que quieres alinear, no el texto.
<!-- moved "vertical-align:middle" style from span to img -->
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Probado en FF3.
Ahora puedes usar flexbox para este tipo de diseño.
.box {
display: flex;
align-items:center;
}
<div class="box">
<img src="https://placehold.it/60x60">
<span style="">Works.</span>
</div>
Probablemente quieras esto:
<div>
<img style="width:30px; height:30px;">
<span style="vertical-align:50%; line-height:30px;">Didn't work.</span>
</div>
Como otros han sugerido, intente alinear verticalmente
en la imagen:
<div>
<img style="width:30px; height:30px; vertical-align:middle;">
<span>Didn't work.</span>
</div>
El CSS no es molesto. Es que no lees la documentación. ;P