css - imagen - ¿Es posible alinear verticalmente el texto dentro de un div?

centrar texto vertical y horizontal css

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo alinear verticalmente el texto en un div? 28 respuestas

El siguiente código (también disponible como demostración en JS Fiddle ) no posiciona el texto en el medio, como idealmente me gustaría. No puedo encontrar ninguna forma de centrar verticalmente el texto en una división, incluso usando el atributo de margin-top . ¿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;
}

Answer 1

Agregue una alineación vertical al contenido de la #column-content strong css #column-content strong también:

#column-content strong {
...
vertical-align: middle;
}

También vea su ejemplo actualizado .

=== ACTUALIZACIÓN ===

Con un lapso alrededor del otro texto y otra alineación vertical:

html:

... <span>yet another text content that should be centered vertically</span> ...

css:

#column-content span {
vertical-align: middle;
}

También vea el siguiente ejemplo .

Answer 2

Andrés Ilich tiene razón. En caso de que alguien se pierda su comentario ...

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

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

<div>vertically centered text</div>

B.) Si tienes múltiples líneas de texto:

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

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

Answer 3

Cree un contenedor para su contenido de texto, quizás un span .

#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

Answer 4

Esta es la forma más sencilla de hacerlo si necesita varias líneas. Envuelva el texto de la span en otro span y especifique su altura con la line-height . El truco de varias líneas es restablecer la line-height span interior.

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle {
line-height: /*set height*/;
}
.textvalignmiddle > span {
display: inline-block;
vertical-align: middle;
line-height: 1em; /*set line height back to normal*/
}

DEMO

Por supuesto, el span exterior podría ser un div o whewaveyou

Answer 5

Esta es una pregunta antigua, pero la respuesta aceptada no funciona para texto de varias líneas. Actualicé JSfiddle para mostrar la alineación vertical de texto multilínea css como se explica here :

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

Answer 6

Esto simplemente se supone que funciona:

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

Lo probé en tu demo.

Answer 7

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

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

El problema con el código de Omar, de lo contrario operativo, surge cuando se quiere centrar el cuadro en la pantalla o en su antepasado inmediato. Este centrado se realiza estableciendo su posición en

position: relative; o position:static; (No con cargo: absoluto ni fijo).

y luego margen: auto; o margen derecho: auto; margen izquierdo: auto;

Bajo este centro de alineación del entorno de alineación, la sugerencia de Omar no funciona. Tampoco funciona en IE8 (aún 7.7% de participación de mercado). Por lo tanto, para IE8 (y otros navegadores), se debe considerar una solución como se ve en otras soluciones anteriores.

Answer 8

Prueba esto:

HTML

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

CSS

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

Answer 9

Sé que es totalmente estúpido y que normalmente no deberías usar tablas cuando no estás creando tablas, pero: Las celdas de la tabla pueden alinear varias líneas de texto centradas verticalmente e incluso hacer esto de manera predeterminada. Así que una solución que funciona bastante bien podría ser algo como esto:

html:

<div class="box">
<table class="textalignmiddle">
<tr>
<td>lorem ipsum ...</td>
</tr>
</table>
</div>

css: (hacer que el elemento de la tabla siempre se ajuste a la caja div)

.box {
/* for example */
height: 300px;
}
.textalignmiddle {
width: 100%;
height: 100%;
}

Consulte aquí: http://www.cssdesk.com/LzpeV

Answer 10

Actualización 10 de abril de 2016

Los cuadros flexibles ahora se deben usar para alinear los 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>

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

Un buen tipo llamado Mahendra publicó una solución muy funcional here

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

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