css - verticalmente - poner texto al lado de una imagen html




¿Alinear verticalmente el texto junto a una imagen? (14)

Aquí hay algunas técnicas simples para alinear verticalmente:

Una línea de alineación vertical: medio

Este 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: parte inferior

Absolutamente posicionar un div interior con respecto 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>

Alineación vertical de múltiples 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 tiene que soportar versiones antiguas de IE <= 7

Para que esto funcione correctamente en todos los ámbitos, deberás 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 la división interna, puede lograr el mismo resultado. Podemos combinar los dos usando otra característica que IE no admite: selectores de 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 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 propiedad transform: translateY . ( http://caniuse.com/#feat=transforms2d )

La aplicación de las siguientes 3 líneas de CSS a un elemento lo centrará verticalmente dentro de su padre independientemente de la altura del elemento padre:

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

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

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

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

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

Debe 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>

La respuesta aceptada centra el icono alrededor de la mitad de la altura x del texto que se encuentra a su lado (como se define en las especificaciones de CSS ). Lo que podría ser lo suficientemente bueno, pero puede parecer un poco extraño, si el texto tiene ascendentes o descendientes que sobresalen justo en la parte superior o inferior:

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

¿Alguien ha hablado de 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, luego solo lo coloca en la parte superior del cuadro de línea.

La principal diferencia de comportamiento entre vertical-align: middle y top es que los primeros elementos se mueven en relación con la línea de base de la caja (que se coloca donde sea necesario para cumplir con todas las alineaciones verticales y, por lo tanto, se siente bastante impredecible ) y la segunda en relación con los límites externos de El cuadro de línea (que es más tangible).


En primer lugar, el CSS en línea no se recomienda en absoluto, realmente desordena su HTML.

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

.align-middle {
  vertical-align: middle;
}
<div>
  <img class="align-middle" src="https://i.stack.imgur.com/ymxaR.png">
  <span class="align-middle">I'm in the middle of the image! thanks to CSS! hooray!</span>
</div>


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

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

Escribe estas propiedades de span

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

display:inline-block; uso display:inline-block; Cuando usa vertical-align propiedad vertical-align Estas son propiedades asociadas


La técnica utilizada en la respuesta aceptada funciona solo para texto de línea simple ( 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 formas (Métodos 1 y 2 inspirados en este artículo de CSS-Tricks )

Método # 1: tablas CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

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

Método # 2: FIDDLE en 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 # 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 */
}

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

En serio, es la forma más fácil.


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


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 vertical-align en la imagen:

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

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


Puede ser confuso, estoy de acuerdo. Trate de utilizar las características de la mesa. Uso este simple truco de CSS para ubicar los modales en el centro de la página web. Tiene soporte de navegador grande:

<div class="table">
    <div class="cell">
        <img src="..." alt="..." />
        <span>It works now</span>
    </div>
</div>

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 desee. Disfrutar.


Solución multilínea:

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

<div style="display:table;width:30px;height:160px;">
    <img style="display:table-cell;width:30px;height:60px;padding:50px" src='...' />
    <div style="display:table-cell;height:30px;vertical-align:middle">
      Multiline text centered vertically
    </div>
</div>
<!-- note: img (height + 2x padding) must be equal to root div height -->

Funciona en todos los browers y ie9 +.


Use line-height:30px para el intervalo para que el texto se alinee con la imagen:

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

background:url(../images/red_bullet.jpg) left 3px no-repeat;

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





vertical-alignment