Alinear verticalmente el texto junto a una imagen?

Question

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

span{
  vertical-align: middle;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

Answer 1

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>

Answer 2

Estas son algunas técnicas simples para la alineación vertical:

Alineación vertical de una línea: medio

Este es fácil: establezca el alto de línea del elemento de texto para que sea igual al del contenedor

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

Alineación vertical de líneas múltiples: parte inferior

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 líneas múltiples: 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 hackear un poco el CSS. Afortunadamente, hay un error de IE que funciona 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 avanzados de CSS.

<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 utiliza 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 elemento primario independientemente de la altura del elemento primario:

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

Answer 3

Cambiar su div en un contenedor flex:

div {display:flex;}

Ahora hay dos métodos para centro de las alineaciones de todo el contenido:

Método 1:

div {align-items:center;}

DEMO

---

Método 2:

div * {margin-top:auto; margin-bottom:auto;}

DEMO

---

Pruebe diferentes valores de anchura y altura en la img y tamaño de fuente diferente de los valores en la span y vas a ver que siempre se quedan en el medio de la maceta.

Answer 4

Usted tiene que aplicar vertical-align: middle ambos elementos han sido perfectamente centrada.

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

El aceptado respuesta hace centro en el icono de alrededor de la mitad de la altura x del texto junto a él (como se define en el Especificaciones de CSS).Que podría ser lo suficientemente buena, pero puede parecer un poco fuera, si el texto tiene ascendentes o descendentes de pie justo en la parte superior o inferior:

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

Alguien ha hablado acerca de por qué vertical-align: top obras en el escenario? La imagen en cuestión es probablemente más alto que el texto y por lo tanto define el borde superior de la línea de caja. vertical-align: top en el elemento span, a continuación, sólo coloca en la parte superior de la línea de caja.

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

Answer 5

La técnica utilizada en la respuesta aceptada funciona solo para texto de una línea ( demo ) , pero no texto de varias líneas ( demo ), como se indica allí.

Si alguien necesita centrar verticalmente el texto de líneas múltiples en una imagen, aquí hay algunas maneras (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: 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 # 3: Flexbox ( FIDDLE ) (< a href = "http://caniuse.com/flexbox" rel = "noreferrer"> caniuse )

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

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

Answer 6

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>

Answer 7

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

Answer 8

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

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

Answer 9

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

CSS divide las etiquetas HTML en dos grupos: en línea y a nivel de bloque. Buscar & Quot; bloque css vs inline & Quot; y aparece un gran artículo ...

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

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

Answer 10

Use line-height:30px para el espacio 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>

Answer 11

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

Esa es realmente la forma más fácil.

Answer 12

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

<div>
    <img src="https://placehold.it/80x80">
    <span>This is my very long text what should align. This is my very long text what should align.</span>
</div>

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;
}

Answer 13

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

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

Answer 14

Escriba estas propiedades de extensión

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

Use display:inline-block; Cuando use vertical-align propiedad. Estas son propiedades asociadas

Answer 15

Puede configurar la imagen como inline element utilizando display propiedad

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>

Answer 16

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;
}

Answer 17

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 navegadores y ie9 +

Answer 18

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

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

y parte 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. Disfruta.

Answer 19

En primer lugar, CSS en línea no se recomienda en absoluto, realmente estropea tu 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>

Answer 20

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 lee la documentación . ; P