¿Alinea el texto verticalmente al lado de una imagen?

¿Por qué no se vertical-align: middle trabajo vertical-align: middle ? Y, sin embargo, vertical-align: top funciona.

 
Doesn't work.

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.

  
Works.

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

 
Doesn't work.

Líneas múltiples alineadas verticalmente: abajo

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

 
This is positioned on the bottom

Líneas múltiples alineadas verticalmente: medio

 
This is positioned in the middle

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. Configuración 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.

  

Works in everything!

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 propiedad transform: translateY . ( 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%); 

Cambie su 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.

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

 
Perfectly centered

La técnica utilizada en la respuesta aceptada funciona solo para texto de línea única ( demo ), pero no para texto de varias líneas ( demo ), 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 ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Método n. ° 2: Pseudo elemento 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 proveedor):

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

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

 
It does work on all browsers

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

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

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

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

CSS divide las tags HTML en dos grupos: en línea y en bloque. Busca “css block vs inline” y aparece un gran artículo https://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image/

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)

Otra cosa que puede hacer es establecer el line-height de line-height del texto al tamaño de las imágenes dentro de

. Luego ajuste las imágenes a vertical-align: middle;

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

Use line-height:30px para el tramo, de modo que el texto esté alineado con la imagen:

 
Doesn't work.

Todavía no he visto una solución con margin en ninguna de estas respuestas, así que aquí está mi solución a este problema.

Esta solución solo funciona si conoce el ancho de su imagen.

El HTML

 
This is my very long text what should align. This is my very long text what should align.

El CSS

 div { overflow:hidden; } img { width:80px margin-right:20px; display:inline-block; vertical-align:middle; } span { width:100%; margin-right:-100px; padding-right:100px; display:inline-block; vertical-align:middle; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } 
 background:url(../images/red_bullet.jpg) left 3px no-repeat; 

Generalmente uso 3px en lugar de top . Al boost / disminuir ese valor, la imagen puede cambiarse a la altura requerida.

Escriba estas propiedades de span

 span{ display:inline-block; vertical-align:middle; } 

Usar display:inline-block; Cuando utiliza vertical-align propiedad vertical-align Estas son propiedades asignadas

En un botón en jQuery mobile, por ejemplo, puede modificarlo un poco aplicando este estilo a la imagen:

 .btn-image { vertical-align:middle; margin:0 0 3px 0; } 

Puede establecer la imagen como inline element usando la propiedad de display

 
Works.

Solución multilínea:

http://jsfiddle.net/zH58L/6/

 
Multiline text centered vertically

Funciona en todos los navegadores y es ie9 +

Puede ser confuso, estoy de acuerdo. Intente utilizar las características de la tabla. Utilizo este simple truco de CSS para colocar modales en el centro de la página web. Tiene un gran soporte de navegador:

 
http://sofes.miximages.com/css/.. It works now

y parte de CSS:

 .table { display: table; } .cell { display: table-cell; vertical-align: middle; } 

Tenga en cuenta que debe diseñar y ajustar el tamaño de la imagen y el contenedor de la tabla para que funcione como lo desee. Disfrutar.

En primer lugar, no se recomienda CSS en línea , realmente daña tu HTML.

Para alinear la imagen y el tramo, puede simplemente hacer vertical-align:middle .

 .align-middle { vertical-align: middle; } 
 
I'm in the middle of the image! thanks to CSS! hooray!

Probablemente quieras esto:

 
Didn't work.

Como otros han sugerido, intente vertical-align en la imagen:

 
Didn't work.

CSS no es molesto Simplemente no lee la documentación . ;PAG