¿Alinear verticalmente el texto al lado de una imagen?

1967

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

span{
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>Doesn't work.</span>
</div>

sam
fuente
12
Aquí hay un artículo interesante: Entendimientovertical-align
Phaedrus

Respuestas:

2253

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>

Michael Haren
fuente
188
"Como todo está en una línea, es realmente la imagen que quieres alinear, no el texto". - No, la imagen está bien donde está. Queremos que el texto esté alineado. No es la imagen. - Entiendo que esto funciona (en algunas circunstancias, por ejemplo: cuando no estás usando "float: left" en la imagen ...), pero es extraño y poco intuitivo que mover físicamente el texto al centro vertical tendría que aplicar un atributo a la imagen a su lado en su lugar.
BrainSlugs83
35
@ BrainSlug83 Ciertamente no es extraño, pero puedo ver cómo los recién llegados pueden tropezarse con esto. Por defecto, se colocará una imagen en la línea de base de texto. Todo lo que está haciendo es moverse donde se adjunta la imagen en relación con el texto. En cuanto a usar float: left, deberías hacerlo en el bloque que contiene la imagen y el texto, o en el texto mismo.
jamesrom
14
@ BrainSlugs83 Convino en que se puede ver como contra-intuitivo. Se necesita un poco de cambio mental, porque de acuerdo con CSS, lo que debe hacer es centrar la imagen en el texto. No es el texto de la imagen.
Greg Pettit
66
No funciona si aumenta el spantamaño de la fuente. Mira mi respuesta .
Mori
2
Pero si establece el tamaño de la imagen en una más pequeña (como width:16px;height:16px), puede ver que la imagen será demasiado baja ...
Matthieu Charbonnier
340

Aquí hay algunas técnicas simples para alineación vertical:

Alineación vertical de una línea: media

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>

Varias líneas de alineación vertical: 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 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%el contenedor y top:-50%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 alineación vertical: medio

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 )

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%);
Adam Lassek
fuente
15
Los selectores display:tabley display:table-cellCSS funcionan muy bien, excepto, por supuesto, en IE7 y versiones posteriores. Después de arrancarme el cabello durante varias horas, decidí que realmente no necesitaba tratar con alguien que todavía usara IE7-.
banncee
2
display:tabletiene algunas limitaciones en varios navegadores (en IE11 max-heightno funciona si el elemento está dentro de una celda de tabla), por lo que en algunos casos extremos no es una buena idea alinearse verticalmente usando celdas de tabla.
jahu
97

Conviértalo diven un contenedor flexible:

div { display:flex; }


Ahora hay 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-top:auto; margin-bottom:auto; }

MANIFESTACIÓN


Pruebe diferentes valores de ancho y alto en imgy diferentes valores de tamaño de fuente en spany verá que siempre permanecen en el medio del contenedor.

Mori
fuente
Para centrar el texto al lado o entre imágenes (horizontalmente en la página), también debe agregar justify-content: center;y para espaciar (sin usar etiquetas <br/>) también puede agregar un padding: 1em;. Gran actualización para nosotros los desarrolladores de navegadores modernos.
CSS
Esto funcionó bien. Intenté todas y cada una de las otras respuestas, y aunque funcionaron hasta cierto punto, no funcionó para mí. Tenía alrededor de 3 líneas de texto para alinear, y esta respuesta funcionó perfectamente. Gracias @Mori
semaj0
87

Debe aplicar vertical-align: middlea ambos elementos para que se centre 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 al lado (como se define en las especificaciones CSS ). Lo que podría ser lo suficientemente bueno, pero puede verse un poco fuera de lugar, si el texto tiene ascendentes o descendentes que se destacan en la parte superior o inferior:

comparación de iconos centrada

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 sobre por qué vertical-align: topfunciona 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: topen el elemento span y luego simplemente lo coloca 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 relativos a 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 relativo a los límites exteriores del cuadro de línea (que es más tangible)

christopheraue
fuente
1
Noté trabajos superiores e inferiores pero no medios. Básicamente, el "medio" no se define como a medio camino entre la parte superior e inferior. Más significa "cuando es más alto que el texto, sobresalga en ambos sentidos por igual". Y aquí no necesita alineación vertical: en el medio del texto, solo la imagen.
Curtis
61

La técnica utilizada en la respuesta aceptada funciona solo para texto de una sola línea ( demostración ), pero no para texto de varias líneas ( demostración ), 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 ) ( caniuse )

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

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}
Danield
fuente
3
Los métodos funcionan bien si la imagen es más grande (en altura) que el texto. Pero si la imagen es más pequeña, todos, excepto el último, lamentablemente fallan
Thomas
28

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>
HTMLnewBie
fuente
19

Debido a que debe establecer la line-heightaltura del div para que esto funcione

Ikke
fuente
2
Intenté establecer la altura de la línea en 30px y todavía no funciona.
sam
12

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

-moz-box-align: center;
-webkit-box-align: center;
Dan
fuente
11

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 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. Busque "css block vs inline" y aparecerá 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)

David
fuente
2
text-aligny vertical-align(con la excepción de su aplicación en tdelementos para fines de herencia) están diseñadas específicamente para inliney inline-blockelementos ( span, img, etc).
Kevin Peno
11

Úselo line-height:30pxpara 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>
Touhid Rahman
fuente
11

Otra cosa que puede hacer es establecer el texto line-heightal tamaño de las imágenes dentro de <div>. Luego configure las imágenes envertical-align: middle;

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

nullpoint81
fuente
3
Tenga en cuenta que esto no funciona correctamente si su contenido se distribuye en varias líneas.
Ahmad Alfy
y entonces, ¿por qué no solo altura de línea: 100%?
Jean Paul AKA el_vete
8

marginTodavía no he visto una solución 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;
}
Fleuv
fuente
1
Aquí está la solución exacta. También funciona para textos de varias líneas ... Los anteriores no son adecuados para líneas múltiples.
efirat
6
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.

Aspirante canadiense
fuente
No ayuda en situaciones donde el tamaño de la imagen es desconocido o dinámico.
Dan
6

Escribe estas propiedades de span

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

Usar display:inline-block;cuando usa la vertical-alignpropiedad. Estas son propiedades asociadas

Mr.Pandya
fuente
6

Puede configurar la imagen como inline elementusando la displaypropiedad

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

Super usuario
fuente
3

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;
}
den232
fuente
2

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 +

Benjamin Crouzier
fuente
2

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 gran soporte de navegador:

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

CodeGems
fuente
0

Primero CSS en línea no se recomienda , realmente estropea tu HTML.

Para alinear la imagen y la amplitud, 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>

Alireza
fuente
2
Hay muchas buenas razones para usar CSS en línea. Reaccionar: CSS en JS por ejemplo.
jlyonsmith
0

No estoy seguro de por qué no lo muestra en el navegador de su navegación, pero normalmente uso un fragmento como este cuando intento mostrar un encabezado con una imagen y un texto centrado, ¡espero que ayude!

https://output.jsbin.com/jeqorahupo

            <hgroup style="display:block; text-align:center;  vertical-align:middle;  margin:inherit auto; padding:inherit auto; max-height:inherit">

            <header style="background:url('http://lorempixel.com/30/30/') center center no-repeat; background-size:auto; display:inner-block; vertical-align:middle; position:relative; position:absolute; top:inherit; left:inherit; display: -webkit-box; display: -webkit-flex;display: -moz-box;display: -ms-flexbox;display: flex;-webkit-flex-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;">

            <image src="http://lorempixel.com/60/60/" title="Img title" style="opacity:0.35"></img>
                    http://lipsum.org</header>
                    </hgroup>
Jean Paul AKA el_vete
fuente
0
<!DOCTYPE html>
<html>
<head>
<style>
 .block-system-branding-block {
 flex: 0 1 40%;
}
@media screen and (min-width: 48em) {
.block-system-branding-block {
flex: 0 1 420px;
margin: 2.5rem 0;
text-align: left;
}
}
.flex-containerrow {
display: flex;
}
.flex-containerrow > div {
  justify-content: center;
align-items: center;
  }
 .flex-containercolumn {
display: flex;
flex-direction: column;
}
.flex-containercolumn > div {
  width: 300px;
 margin: 10px;
 text-align: left;
 line-height: 20px;
 font-size: 16px;
}
.flex-containercolumn  > site-slogan {font-size: 12px;}
.flex-containercolumn > div > span{ font-size: 12px;}
</style>
</head>
<body>
<div id="block-umami-branding" class="block-system block- 
system-branding-block">
  <div class="flex-containerrow">
 <div>
  <a href="/" rel="home" class="site-logo">
  <img src="https://placehold.it/120x120" alt="Home">
</a>
</div><div class="flex-containerrow"><div class="flex-containercolumn">
  <div class="site-name ">
    <a href="/" title="Home" rel="home">This is my sitename</a>
   </div>
    <div class="site-slogan "><span>Department of Test | Ministry of Test | 
 TGoII</span></div>
 </div></div>
</div>
 </div>
</body>
</html>
Pradeep
fuente
-4

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, prueba vertical-alignla 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 . ;PAGS

extraño
fuente
66
¿Y si la altura de la imagen es dinámica? Estoy jodido :( PS, solo porque la documentación existe para CSS no lo hace molesto o poco intuitivo.
Sam
¿Te refieres a molesto e intuitivo? No especificó si la altura de la imagen es dinámica en absoluto en su pregunta, por lo que asumí que la altura fija era con lo que se quedaría.
extraño
2
Estoy con Sam en este caso. Asumí que los artículos deberían estar centrados con la altura de la img. Sin embargo, creo que todos podríamos enfriarnos un poco.
Michael Haren