¿Alinear verticalmente el texto junto a una imagen?
¿Por qué no vertical-align: middlefunciona? Y, sin embargo, vertical-align: top funciona .
span{
vertical-align: middle;
}<div>
<img src="https://via.placeholder.com/30" alt="small img" />
<span>Doesn't work.</span>
</div>
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 lo que deseas alinear es la imagen, no el texto.
<!-- 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>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://via.placeholder.com/60x60">
<span style="">Works.</span>
</div>
A continuación se muestran algunas técnicas sencillas para la alineación vertical:
Alineación vertical de una línea: media
Esto es fácil: establezca la altura de línea del elemento de texto para que sea igual a la del contenedor
<div>
<img style="width:30px; height:30px;">
<span style="line-height:30px;">Doesn't work.</span>
</div>
Alineación vertical de varias líneas: abajo
Coloque absolutamente un div interno en relación con su contenedor
<div style="position:relative;width:30px;height:60px;">
<div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>
Alineación vertical de varias líneas: medio
<div style="display:table;width:30px;height:60px;">
<div style="display:table-cell;height:30px;">This is positioned in the middle</div>
</div>
Si debe admitir versiones antiguas de IE <= 7
Para que esto funcione correctamente en todos los ámbitos, tendrás que modificar un poco el CSS. Por suerte, hay un error de IE que juega a nuestro favor. Configurando top:50%en el contenedor 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.
<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>
Altura del contenedor variable alineación vertical: media
Esta solución requiere un navegador un poco más moderno que las otras soluciones, ya que hace uso de la transform: translateYpropiedad. ( 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%);
Conviértelo diven un contenedor flexible:
div { display: flex; }
Ahora existen 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: auto 0; }
MANIFESTACIÓN
Pruebe diferentes valores de ancho y alto en el imgy diferentes valores de tamaño de fuente en el spany verá que siempre permanecen en el medio del contenedor.
Hay que aplicar vertical-align: middlesobre ambos elementos para que quede perfectamente centrado.
<div>
<img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
<span style="vertical-align:middle">Perfectly centered</span>
</div>La respuesta aceptada centra el ícono alrededor de la mitad de la altura x del texto al lado (como se define en las especificaciones de CSS ). Lo cual podría ser bastante bueno, pero puede verse un poco extraño si el texto tiene ascendentes o descendentes resaltados justo en la parte superior o inferior:
A la izquierda el texto no está alineado, a la derecha es como se muestra arriba. Puede encontrar una demostración en vivo en este artículo sobre alineación vertical .
¿Alguien ha hablado de por qué vertical-align: topfunciona en el escenario? La imagen de la pregunta probablemente sea más alta que el texto y, por lo tanto, define el borde superior del cuadro de línea. vertical-align: topen el elemento span y luego simplemente colóquelo en la parte superior del cuadro de línea.
La principal diferencia en el comportamiento entre vertical-align: middley topes que el primero mueve elementos en relación con la línea base del cuadro (que se coloca donde sea necesario para cumplir con todas las alineaciones verticales y, por lo tanto, se siente bastante impredecible ) y el segundo en relación con los límites exteriores del cuadro de línea (que es más tangible).
La técnica utilizada en la respuesta aceptada funciona solo para texto de una sola línea ( demo ), pero no para texto de varias líneas ( demo ), como se indica allí.
Si alguien necesita centrar verticalmente texto de varias líneas en una imagen, aquí hay algunas formas (Métodos 1 y 2 inspirados en este artículo de CSS-Tricks )
Método n.º 1: tablas CSS ( FIDDLE ) (IE8+ ( caniuse ))
CSS:
div {
display: table;
}
span {
vertical-align: middle;
display: table-cell;
}
Método n.º 2: pseudoelemento en el contenedor ( FIDDLE ) (IE8+)
CSS:
div {
height: 200px; /* height of image */
}
div:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
img {
position: absolute;
}
span {
display: inline-block;
vertical-align: middle;
margin-left: 200px; /* width of image */
}
Método n.º 3: Flexbox ( FIDDLE ) ( caniuse )
CSS (el violín anterior contiene prefijos de proveedores):
div {
display: flex;
align-items: center;
}
img {
min-width: 200px; /* width of image */
}
