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.