No olvides que en las ciencias un problema suele tener más de una resoluciones, pero mostraremos lo más óptimo y mejor.
Solución:
En realidad, en este caso es bastante simple: aplique la alineación vertical a la imagen. Dado que todo está en una línea, lo que realmente desea alinear es la imagen, no el texto.
Probado en FF3.
Ahora puedes usar flexbox para este tipo de diseño.
.box
display: flex;
align-items:center;
Works.
Aquí hay algunas técnicas simples para la alineación vertical:
Alineación vertical de una línea: medio
Este es fácil: establezca la altura de línea del elemento de texto para que sea igual a la del contenedor
![]()
Doesn't work.
Múltiples líneas vertical-align:bottom
Posicione absolutamente un div interno en relación con su contenedor
This is positioned on the bottom
Múltiples líneas vertical-align:middle
This is positioned in the middle
Si debe admitir versiones antiguas de IE <= 7
Para que esto funcione correctamente en todos los ámbitos, tendrá que modificar un poco el CSS. Afortunadamente, hay un error de IE que funciona a nuestro favor. Entorno top:50% en el recipiente y top:-50% en el div interno, puede lograr el mismo resultado. Podemos combinar los dos usando otra característica que IE no admite: selectores CSS avanzados.
Works in everything!
Altura variable del contenedor vertical-align:middle
Esta solución requiere un navegador un poco más moderno que las otras soluciones, ya que hace uso de la transform: translateY propiedad. (http://caniuse.com/#feat=transforms2d)
Aplicar las siguientes 3 líneas de CSS a un elemento lo centrará verticalmente dentro de su elemento principal, independientemente de la altura del elemento principal:
position: relative;
top: 50%;
transform: translateY(-50%);
Cambia tu div en un contenedor flexible:
div display:flex;
Ahora hay dos métodos para centrar las alineaciones de todo el contenido:
Método 1:
div align-items:center;
MANIFESTACIÓN
Método 2:
div * margin-top:auto; margin-bottom:auto;
MANIFESTACIÓN
Pruebe diferentes valores de ancho y alto en el img y diferentes valores de tamaño de fuente en el span y verás que siempre quedan en el medio del recipiente.
Agradecemos que quieras confirmar nuestra publicación escribiendo un comentario y valorándolo te damos la bienvenida.