Pregunta ¿Es posible alinear verticalmente el texto dentro de un div? [duplicar]


Esta pregunta ya tiene una respuesta aquí:

El código a continuación (también disponible como una demostración en JS Fiddle) no coloca el texto en el medio, como lo idealmente me gustaría. No puedo encontrar ninguna manera de centrar verticalmente el texto en un div, incluso usando el margin-top atributo. ¿Cómo puedo hacer esto?

<div id="column-content">
    <img src="http://i.stack.imgur.com/12qzO.png">
    <strong>1234</strong>
    yet another text content that should be centered vertically
</div>
#column-content {
    display: inline-block;
    border: 1px solid red;
    position:relative;
}

#column-content strong {
    color: #592102;
    font-size: 18px;
}

img {
    margin-top:-7px;
    vertical-align: middle;        
}

543
2018-02-12 14:00


origen


Respuestas:


Crea un contenedor para tu contenido de texto, un span quizás.

#column-content {
  display: inline-block;
}
img {
  vertical-align: middle;
}
span {
  display: inline-block;
  vertical-align: middle;
}

/* for visual purposes */
#column-content {
  border: 1px solid red;
  position: relative;
}
<div id="column-content">

  <img src="http://i.imgur.com/WxW4B.png">
  <span><strong>1234</strong>
    yet another text content that should be centered vertically</span>
</div>

JSFiddle


382
2018-02-12 14:06



Andres Ilich tiene razón. Solo en caso de que alguien pierda su comentario ...

A.) Si solo tiene una línea de texto:

HTML:

<div>vertically centered text</div>

CSS:

div
{
  height: 200px;
  line-height: 200px; /* <-- this is what you must define */
  vertical-align: middle;
}

Haga clic para Demo

B.) Si tienes varias líneas de texto:

HTML:

<div><span>vertically centered text</span></div>

CSS:

div
{
  height: 200px;
  line-height: 200px;
}

span
{
  display: inline-block;
  vertical-align: middle;
  line-height: 14px; /* <-- adjust this */
}

Haga clic para Demo


584
2018-02-13 09:36



Actualización 10 de abril de 2016

Ahora se deben usar Flexboxes para alinear elementos verticalmente (o incluso horizontalmente).

<div class="flex-container">
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
    <div class="flex-item">Item</div>
</div>

<style>
.flex-container {
    display:flex;
    align-items: center; /* Vertical center alignment */
    justify-content: center; /* Horizontal center alignment */
}
</style>

Se puede leer una buena guía de flexbox en Trucos de CSS. Gracias Ben (de los comentarios) por señalar, no tuve tiempo para actualizar.


Un chico bueno llamado Mahendra publicó una solución muy funcional aquí

La siguiente clase debe hacer que el elemento se centre horizontal y verticalmente en su elemento principal.

.absolute-center {

/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;

}

159
2017-11-02 09:31



Este es un hilo antiguo, pero la respuesta aceptada no funciona para el texto de varias líneas y este es el resultado principal en google. Actualicé el jsfiddle para mostrar alineación vertical de texto css multiline como se explica aquí

<div id="column-content">
    <div>yet another text content that should be centered vertically</div>
</div>

#column-content {
    border: 1px solid red;
    height: 200px;
    width: 100px;
}
div {
    display: table-cell;
    vertical-align:middle;
    text-align: center;
}

también funciona con <br> en "otro más ..."


59
2017-07-17 13:30



Prueba esto:

HTML

<div><span>Text</span></div>

CSS

div {
    height: 100px;
}

span {
    height: 100px;
    display: table-cell;
    vertical-align: middle;
}

24
2018-04-03 21:14



Se supone que esto simplemente funciona:

#column-content {
        --------
        margin-top:auto;
        margin-bottom:auto;
    }

Lo intenté en tu demo.


10
2018-02-12 14:25



Para hacer que la solución de Omar (o de Mahendra) sea aún más universal, el bloque de código relativo a FireFox debería reemplazarse por lo siguiente:

/* Firefox */
display:flex;
justify-content:center;
align-items:center;

El problema con el código de Omar, que de otro modo sería operativo, surge cuando quieres centrar el cuadro en la pantalla o en su antecesor inmediato. Este centrado se hace estableciendo su posición para

position: relative; o position:static; (no con la posición: absoluta ni fija).

y entonces margen: automático; o margen-derecha: auto; margin-left: auto;

En este entorno de alineación central de cuadros, la sugerencia de Omar no funciona. No funciona tampoco en IE8 (sin embargo, 7,7% de cuota de mercado). Por lo tanto, para IE8 (y otros navegadores), se debe considerar una solución alternativa como se ve en otras soluciones anteriores.


4
2017-11-11 00:33