¿Alinear verticalmente el texto junto a una imagen?

2110

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

span{
  vertical-align: middle;
}
<div>
  <img src="https://via.placeholder.com/30" alt="small img" />
  <span>Doesn't work.</span>
</div>
0
2409

En realidad, en este caso es bastante simple: aplique la alineación vertical a la imagen. Como está todo 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://via.placeholder.com/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://via.placeholder.com/60x60">
    <span style="">Works.</span>
</div>
2
  • 1
    La solución flexible es mejor que la solución de alineación vertical porque también maneja el caso de varias líneas de texto. Aditya Mittal 9 de agosto a las 21:43
  • Flex funcionó a las mil maravillas. Gracias :)Shen Prabu 25 de agosto a las 18:39
347

A continuación, se muestran algunas técnicas sencillas para la alineación vertical:

Alineación vertical de una línea: 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

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 varias 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 debe admitir versiones antiguas de IE <= 7

Para que esto funcione correctamente en todos los ámbitos, tendrá que piratear un poco el CSS. Afortunadamente, hay un error de IE que funciona a nuestro favor. Colocando 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 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 principal, independientemente de la altura del elemento principal:

position: relative;
top: 50%;
transform: translateY(-50%);
1
  • 15
    Los selectores display:tabley display:table-cellCSS funcionan muy bien, excepto, por supuesto, en IE7 y versiones anteriores. Después de arrancarme el pelo durante varias horas, decidí que realmente no necesitaba tratar con nadie que todavía usara IE7-. banncee 3 abr 13 a las 13:51
103

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 el imgy diferentes valores de tamaño de fuente en el spany verá que siempre permanecen en el medio del contenedor.

2
  • Para centrar el texto junto a las imágenes o entre ellas (horizontalmente en la página), también debe agregar justify-content: center;y para el espaciado (sin usar etiquetas <br/>) es posible que también desee agregar un padding: 1em;. Gran actualización para nosotros, los desarrolladores de navegadores modernos. CSS 3 de diciembre de 2015 a las 1:39
  • Esto funcionó bien. Probé 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 @Morisemaj0 24 de mayo de 2016 a las 13:58
95

Hay que aplicarlo vertical-align: middlea ambos elementos para que quede perfectamente centrado.

<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 de CSS ). Lo cual puede ser lo suficientemente bueno, pero puede parecer un poco extraño, si el texto tiene ascendentes o descendentes que se destacan solo en la parte superior o inferior:

comparación de iconos centrados

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

¿Alguien ha hablado de por qué vertical-align: topfunciona en el escenario? La imagen de 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 lo coloca en la parte superior del cuadro de línea.

La principal diferencia de comportamiento entre vertical-align: middley topes que el primero mueve elementos 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 el segundo en relación con los límites exteriores de la caja de línea (que es más tangible).

0
64

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 un texto de varias líneas en una imagen, aquí hay algunas formas (Métodos 1 y 2 inspirados en este artículo de Trucos CSS )

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 */
}
1
  • 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, lamentablemente todas, excepto la última, fallanThomas 9/04/2015 a las 16:35
30

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>
0
20

Porque tienes que establecer la line-heightaltura del div para que esto funcione

1
  • 3
    Intenté establecer la altura de la línea en 30px y todavía no funciona. sam 28 de enero de 2009 a las 21:08
12

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 a nivel de bloque . Cosas como alineación, margen, 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 aparece un gran artículo ...

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

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

1
  • 3
    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 15/06/12 a las 17:45
12

Básicamente, tendrás que usar CSS3.

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

Úselo line-height:30pxpara el intervalo de modo 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>
0
11

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

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

2
  • 3
    Tenga en cuenta que esto no funciona correctamente si su contenido se distribuye en varias líneas. Ahmad Alfy 6/11/12 a las 11:31
  • y luego, ¿por qué no solo la altura de la línea: 100%? Jean Paul -JP A.K.A el_vete 5/11/19 a las 5:31
10

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;
}
1
  • 1
    Aquí está la solución exacta. También funciona para textos de varias líneas ... Los anteriores no son adecuados para varias líneas. efirat 2 de septiembre de 2016 a las 14:10
7

Escribe estas propiedades de tramo

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

Utilice display:inline-block;cuando utilice una vertical-alignpropiedad. Estas son propiedades asociadas.

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.

1
  • No ayuda en situaciones en las que el tamaño de la imagen es desconocido o dinámico. Dan 18 de septiembre de 2015 a las 12:42
6

Puede configurar la imagen como inline elementel uso de displayla propiedad

<div>
  <img style="vertical-align: middle; display: inline;" src="https://placehold.it/60x60">
  <span style="vertical-align: middle; display: inline;">Works.</span>
</div>
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;
}
3

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 e ie9 +

2

Puede resultar confuso, estoy de acuerdo. Intente utilizar las funciones de la mesa. Utilizo este sencillo truco de CSS para colocar los modales en el centro de la página web. Tiene un gran soporte de navegador:

<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 mesa para que funcione como desee. Disfrutar.

1

Utilizando flex propertyen css.

To align text vertically center by using in flex using align-items:center; if you want to align text horizontally center by using in flex using justify-content:center;.

div{
  display: flex;
  align-items: center;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>

Utilizando table-cellen css.

div{
  display: table;
}
div *{
  display: table-cell;
  vertical-align: middle;
}
<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div>
0

En primer lugar, CSS en línea no se recomienda en absoluto, realmente estropea tu HTML.

Para alinear la imagen y la amplitud, simplemente puede hacerlo 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>
1
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 trato de 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>
0
 div{
  display: flex;
  align-items: center;
}

<div>
  <img src="http://lorempixel.com/30/30/" alt="small img" />
  <span>It works.</span>
</div> 
-1
<!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>
-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, pruebe 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 lee la documentación . ;PAG

3
  • 6
    ¿Y si la altura de la imagen es dinámica? Estoy jodido :( PS, sólo porque existe documentación para CSS no la hace molesto o poco intuitivo.sam 28/01/09 a las 21:13
  • ¿Te refieres a irritante e intuitivo? No especificó si la altura de la imagen es dinámica en absoluto en su pregunta, así que asumí que la altura fija era con lo que se iba a quedar. strager 28 de ene. De 2009 a las 21:15
  • 2
    Estoy con Sam en este. Supuse que los elementos deberían estar centrados con la altura de la imagen que resultó ser. Sin embargo, creo que todos podríamos enfriarnos un poco. Michael Haren 28/01/09 a las 21:16