Pregunta ¿Alinea el texto verticalmente al lado de una imagen?


Por qué no vertical-align: middle ¿trabajo? Y todavía, vertical-align: top  hace trabajo.

<div>
   <img style="width:30px;height:30px">
   <span style="vertical-align:middle">Doesn't work.</span>
</div>

1684
2018-01-28 21:01


origen


Respuestas:


En realidad, en este caso es bastante simple: aplique la alineación vertical a la imagen. Como todo está en una línea, es realmente la imagen que desea 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 puede 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>


1899
2018-01-28 21:10



Aquí hay algunas técnicas simples para vertical-align:

Una línea vertical-alinear: medio

Este es fácil: establezca que la altura de línea del elemento de texto sea igual a la del contenedor

<div>
  <img style="width:30px; height:30px;">
  <span style="line-height:30px;">Doesn't work.</span>
</div>

Líneas múltiples alineadas verticalmente: abajo

Posiciona absolutamente un div interno con relación a su contenedor

<div style="position:relative;width:30px;height:60px;">
  <div style="position:absolute;bottom:0">This is positioned on the bottom</div>
</div>

Líneas múltiples alineadas verticalmente: 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 soportar versiones antiguas de IE <= 7

Para que esto funcione correctamente en todos los ámbitos, tendrás que hackear un poco el CSS. Afortunadamente, hay un error de IE que funciona a nuestro favor. Ajuste top:50% en el contenedor y top:-50% en el div interno, puedes 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 vertical-alinear: medio

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)

Al aplicar las siguientes 3 líneas de CSS a un elemento, se centrará verticalmente dentro de su elemento primario, independientemente de la altura del elemento principal:

position: relative;
top: 50%;
transform: translateY(-50%);

317
2018-01-28 21:45



Cambia tu div en un contenedor flexible:

div {display:flex;}


Ahora hay dos métodos para centrar las alineaciones para 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á que siempre permanecen en el medio del contenedor.


79
2018-03-24 07:54



Tienes que aplicar vertical-align: middle a ambos elementos para que se haya centrado perfectamente.

<div>
  <img style="vertical-align:middle" src="http://lorempixel.com/60/60/">
  <span style="vertical-align:middle">Perfectly centered</span>
</div>

los respuesta aceptada centra el ícono alrededor de la mitad de la altura x del texto al lado (como se define en Especificaciones de CSS) Lo cual podría ser lo suficientemente bueno, pero puede verse un poco apagado, si el texto tiene ascendentes o descendentes que sobresalgan en la parte superior o inferior:

centered icon comparison

A la izquierda, el texto no está alineado, a la derecha es como se muestra arriba. Una demostración en vivo se puede encontrar en este artículo sobre vertical-alinear.

¿Alguien ha hablado sobre por qué? vertical-align: top funciona en el escenario? La imagen en la pregunta es probablemente más alta que el texto y, por lo tanto, define el borde superior del cuadro de línea. vertical-align: top en el elemento span entonces simplemente lo coloca en la parte superior del recuadro de línea.

La principal diferencia en el comportamiento entre vertical-align: middle y top es que los primeros elementos se mueven en relación con la línea base de la caja (que se coloca donde sea necesario para cumplir con todas las alineaciones verticales y por lo tanto se siente más bien impredecible) y el segundo relativo a los límites exteriores del recuadro de línea (que es más tangible).


68
2017-09-11 12:58



La técnica utilizada en la respuesta aceptada funciona solo para texto de líneas simples (manifestación), pero no texto de varias líneas (manifestación) - como se indica allí.

Si alguien necesita centrar verticalmente el texto de varias líneas en una imagen, aquí hay algunas maneras (Métodos 1 y 2 inspirados en este artículo de CSS-Tricks)

Método n. ° 1: tablas CSS (VIOLÍN) (IE8 + (Puedo usar)

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Método n. ° 2: Pseudo elemento en el contenedor (VIOLÍN) (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 (VIOLÍN) (Puedo usar)

CSS (El violín anterior contiene prefijos de proveedor):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}

47
2017-12-24 21:06



Este código funciona tanto en IE como en FF:

<div>
  <img style="width:auto; height:auto;vertical-align: middle;">
  <span>It does work on all browsers</span>
</div>

23
2017-07-02 14:41



Porque tienes que configurar el line-height a la altura del div para que esto funcione


16
2018-01-28 21:05



Básicamente, tendrás que bajar a CSS3.

-moz-box-align: center;
-webkit-box-align: center;

9
2017-11-29 18:24



Para el registro, los "comandos" de alineación no deberían funcionar en un SPAN, porque es un en línea etiqueta, no a nivel de bloque etiqueta. Cosas como alineación, margen, relleno, etc. no funcionarán en una etiqueta en línea porque el objetivo de la línea no es interrumpir el flujo de texto.

CSS divide las etiquetas HTML en dos grupos: en línea y en bloque. Busca "css block vs inline" y aparece un gran artículo ...

http://www.webdesignfromscratch.com/html-css/css-block-and-inline/

(Comprender los principios centrales de CSS es una clave para que no sea tan molesto)


8
2017-11-18 13:24



Otra cosa que puedes hacer es configurar el texto line-height al tamaño de las imágenes dentro del <div>. Luego configura las imágenes para vertical-align: middle;

Esa es en serio la forma más fácil.


8
2018-01-12 14:52