html - texto - CSS vertical-alinear: medio no funciona

centrar texto vertical y horizontal css

Question

Estoy intentando centrar verticalmente un elemento span o div dentro de otro elemento div . Sin embargo, cuando pongo vertical-align: middle , no pasa nada. Intenté cambiar las propiedades de display de ambos elementos y parece que nada funciona.

Esto es lo que estoy haciendo actualmente en mi página web:

.main {
height: 72px;
vertical-align: middle;
border: 1px solid black;
padding: 2px;
}
.inner {
vertical-align: middle;
border: 1px solid red;
}
.second {
border: 1px solid blue;
}

<div class="main">
<div class="inner">
This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>

Aquí hay un jsfiddle de la implementación que muestra que no funciona: http://jsfiddle.net/gZXWC/

Answer 1

Aquí está la última solución más simple: no necesita cambiar nada, solo agregue tres líneas de reglas de CSS a su contenedor del div donde desea centrar su atención. Me encanta Flex Box #LoveFlexBox

.main {
/* I changed height to 200px to make it easy to see the alignment. */
height: 200px;
vertical-align: middle;
border: 1px solid #000000;
padding: 2px;
/* Just add the following three rules to the container of which you want to center at. */
display: flex;
flex-direction: column;
justify-content: center;
/* This is true vertical center, no math needed. */
}
.inner {
border: 1px solid #000000;
}
.second {
border: 1px solid #000000;
}

<div class="main">
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
<div class="inner">This box should be centered in the larger box
<div class="second">Another box in here</div>
</div>
</div>

Prima

el valor justify-content se puede configurar con las siguientes opciones:

• flex-start , que alineará el div infantil con el lugar donde comienza el flujo flexible en su contenedor principal. En este caso, se mantendrá en la parte superior.

• center , que alineará el div infantil con el centro de su contenedor principal. Esto es realmente bueno, porque no es necesario agregar un div adicional para envolver a todos los niños para colocar el contenedor en un contenedor principal para centrar los elementos secundarios. Debido a eso, este es el verdadero centro vertical (en la flex-direction la column . De manera similar, si cambia la flow-direction del flow-direction a la row , se centrará horizontalmente.

• flex-end , que alineará el div infantil con el lugar donde termina el flujo flexible en su contenedor principal. En este caso, se moverá al fondo.

• space-between , que extenderá a todos los niños desde el comienzo del flujo hasta el final del flujo. Si la demostración, agregué otro div para niños, para mostrar que están dispersos.

• space-around , similar al space-between , pero con la mitad del espacio al principio y al final del flujo.

Answer 2

Aquí hay un gran artículo sobre cómo alinear vetical. Me gusta la forma de flotar.

http://www.vanseodesign.com/css/vertical-centering/

El HTML:

<div id="main">
<div id="floater"></div>
<div id="inner">Content here</div>
</div>

Y el estilo correspondiente:

#main {
height: 250px;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#inner {
clear: both;
height: 100px;
}

Answer 3

Aquí tiene un ejemplo de dos maneras de hacer una alineación vertical. Los uso y funcionan bastante bien. Uno usa posicionamiento absoluto y el otro usa flexbox .

Ejemplo de alineación vertical

Usando flexbox, puede alinear un elemento por sí mismo dentro de otro elemento con display: flex; usando align-self . Si necesita alinearlo también horizontalmente, puede usar align-items y justify-content en el contenedor.

Si no quiere usar flexbox, puede usar la propiedad de posición. Si hace que el contenedor sea relativo y el contenido sea absoluto, el contenido podrá moverse libremente dentro del contenedor. Entonces, si usas top: 0; y a la left: 0; en el contenido, se colocará en la esquina superior izquierda del contenedor.

Luego, para alinearlo, solo necesita cambiar las referencias superior e izquierda al 50%. Esto posicionará el contenido en el centro del contenedor desde la esquina superior izquierda del contenido.

Por lo tanto, debe corregir esto traduciendo el contenido a la mitad de su tamaño a la izquierda y a la parte superior.

Answer 4

Como vertical-align funciona como se espera en una td , puede poner una sola table celdas en el div para alinear su contenido.

<div>
<table style="width: 100%; height: 100%;"><tr><td style="vertical-align: middle; text-align: center">
Aligned content here...
</td></tr></table>
</div>

Clunky, pero funciona todo lo que puedo decir. Puede que no tenga los inconvenientes de las otras soluciones.

Answer 5

Debería poner vertical-align: middle en el elemento interno, no el elemento externo. Establezca la propiedad de line-height en el elemento externo para que coincida con la height del elemento externo. A continuación, configure display: inline-block y line-height: normal en el elemento interno. Al hacer esto, el texto en el elemento interno se ajustará con una altura de línea normal. Funciona en Chrome, Firefox, Safari e IE 8+

HTML

<div class="main">
<div class="inner">Vertically centered text</div>
</div>

CSS

.main {
height: 72px;
line-height:72px;
}
.inner {
display: inline-block;
vertical-align: middle;
line-height: normal;
}

Fiddle

Answer 6

Es sencillo. Simplemente agregue display:table-cell en su clase principal.

.main {
height: 72px;
vertical-align: middle;
display:table-cell;
border: 1px solid #000000;
}

¡Mira este jsfiddle !

Answer 7

Esta parece ser la mejor manera: ha pasado algún tiempo desde mi publicación original y esto es lo que se debe hacer ahora: http://jsfiddle.net/m3ykdyds/200

/* CSS file */
.main {
display: table;
}
.inner {
border: 1px solid #000000;
display: table-cell;
vertical-align: middle;
}
/* HTML File */
<div class="main">
<div class="inner"> This </div>
</div>

También puede usar lo siguiente:

Usando CSS3:

<!-- HTML -->
<div class="wrapper">
<div>Hi</div>
</div>
/* CSS */
.wrapper {
display : flex;
align-items : center;
}

Answer 8

Establecer la altura de la línea a la misma altura que contiene div también funcionará

DEMO http://jsfiddle.net/kevinPHPkevin/gZXWC/7/

.inner {
line-height:72px;
border: 1px solid #000000;
}

Answer 9

Prueba esto, funciona muy bien para mí:

/* 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;

Answer 10

Simplemente coloque el contenido dentro de una tabla con una altura del 100% y configure la altura para la div principal

<div style="height:80px;border: 1px solid #000000;">
<table style="height:100%">
<tr><td style="vertical-align: middle;">
This paragraph should be centered in the larger box
</td></tr>
</table>
</div>

Answer 11

Usé esto para alinear todo en el centro del div wrapper en caso de que ayude a alguien, lo encontré más simple:

div.wrapper {
/* --- This works --- */
display: flex;
/* Align Vertically */
align-items: center;
/* Align Horizontally */
justify-content: center;
/* --- ---------- ----- */
width: 100%;
height:100px;
background-color: blue;
}
div.inner {
width: 50px;
height: 50px;
background-color: orange;
}

<div class="wrapper">
<div class="inner">
</div>
</div>

Answer 12

Usando CSS3:

<div class="outer">
<div class="inner"/>
</div>

Css:

.outer {
display : flex;
align-items : center;
}

Nota: Esto podría no funcionar en los viejos IE''s

Answer 13

.child en el centro de .parent . Funciona cuando los tamaños de píxeles son desconocidos (en otras palabras, siempre) y no hay problemas con IE9 + también.

.parent { position: relative; }
.child {
position: absolute;
top : 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform : translate(-50%, -50%);
}

<div class="parent" style="background:lightyellow; padding:6em">
<div class="child" style="background:gold; padding:1em">&mdash;</div>
</div>

Answer 14

HTML

<div id="myparent">
<div id="mychild">Test Content here</div>
</div>

CSS

#myparent {
display: table;
}
#mychild {
display: table-cell;
vertical-align: middle;
}

Configuramos el div principal para que se muestre como una tabla y el div infantil para que se muestre como una celda de tabla. Entonces podemos usar vertical-align en el div infantil y establecer su valor en middle. Cualquier cosa dentro de este div infantil se centrará verticalmente.