css - horizontally - Div table-cell vertical align no funciona

display table cell width 100

Question

Intento simplemente centrar el texto horizontal y verticalmente usando DIV y tipo de pantalla como celda de tabla, pero no está funcionando ni en IE8 ni en Firefox.

Debajo está el CSS que estoy usando y eso es todo lo que está en la página html.

@charset "utf-8";
/* CSS Document */
html, body
{
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 5px;
}
div.Main
{
background-color:#FFFFFF;
border-collapse:collapse;
width:800px;
margin-left:auto;
margin-right:auto;
}
div.MainHeader
{
color:#C00000;
font-size:18pt;
font-weight:bold;
text-align:center;
width:800px;
}
div.BlackBox
{
background-color:#000000;
color:#FFFF00;
display:table-cell;
float:left;
font-size:18pt;
font-weight:bold;
height:191px;
text-align:center;
vertical-align:middle;
width:630px;
}
div.BlackBoxPicture
{
background-color:#000000;
float:right;
height:191px;
margin-top:auto;
margin-bottom:auto;
text-align:right;
vertical-align:bottom;
width:170px;
}

¿Qué estoy haciendo mal?

Answer 1

Así es como lo hago:

CSS:

html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle
}

HTML:

<div id="content">
Content goes here
</div>

Ver

Ejemplo de centrado vertical

y

CSS: centrando cosas .

Answer 2

Creo que table-cell necesita tener una display:table principal display:table elemento de display:table .

Answer 3

En algún momento los flotadores frenan la alineación vertical, es mejor evitarlos.

Answer 4

En mi caso, quería centrarme en un contenedor principal con una posición: absoluta.

<div class="absolute-container">
<div class="parent-container">
<div class="centered-content">
My content
</div>
</div>
</div>

Tuve que agregar un poco de posicionamiento para arriba, abajo, izquierda y derecha.

.absolute-container {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.parent-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
.centered-content {
display: table-cell;
text-align: center;
vertical-align: middle
}

Answer 5

Establece la altura para el elemento padre.

Answer 6

Flotar con otra envoltura sin usar display: table; , funciona:

<div style="float: right;">
<div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>

Answer 7

Porque todavía usas flotador ...

intente eliminar "flotante" y envuélvalo con la pantalla: tabla

ejemplo:

<div style="display:table">
<div style="display:table-cell;vertical-align:middle;text-align:center">
Hai i''m center here Lol
</div>
</div>

Answer 8

Puede alinear verticalmente un elemento flotante de forma que funcione en IE 6+. No necesita el marcado completo de la tabla tampoco. Este método no está perfectamente limpio, incluye envoltorios y hay algunas cosas que debe tener en cuenta, por ejemplo, si tiene demasiado texto que sobresalga del contenedor, pero es bastante bueno.

Respuesta corta: solo necesita aplicar display: table-cell a un elemento dentro del elemento flotante (las celdas de la tabla no flotan), y usar una reserva con position: absolute y top para IE antiguo.

Respuesta larga: Aquí hay un jsfiddle que muestra los conceptos básicos . Lo importante resumido (con un comentario condicional que agrega una clase .old-ie):

 .wrap {
float: left;
height: 100px; /* any fixed amount */
}
.wrap2 {
height: inherit;
}
.content {
display: table-cell;
height: inherit;
vertical-align: middle;
}
.old-ie .wrap{
position: relative;
}
.old-ie .wrap2 {
position: absolute;
top: 50%;
}
.old-ie .content {
position: relative;
top: -50%;
display: block;
}

Aquí hay un jsfiddle que deliberadamente resalta las fallas menores con este método. Tenga en cuenta cómo:

• En los navegadores estándar, el contenido que excede la altura del elemento contenedor deja de centrarse y comienza a descender por la página. Este no es un gran problema (probablemente se ve mejor que arrastrarse por la página) y se puede evitar evitando contenido demasiado grande (tenga en cuenta que a menos que haya pasado por alto algo, métodos de overflow: auto; como overflow: auto; no parece trabajar)
• En el viejo IE, el elemento de contenido no se estira para llenar el espacio disponible; la altura es el alto del contenido, no del contenedor.

Esas son limitaciones bastante menores, pero vale la pena tenerlas en cuenta.

Código e idea adaptados desde aquí

Answer 9

Un elemento con el siguiente diseño se alineará verticalmente a la mitad:

.content{
position:relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top:50%;
}

Sin embargo, el elemento padre debe tener una altura fija. Ver este violín: https://jsfiddle.net/15d0qfdg/12/

Answer 10

vea este bin: http://jsbin.com/yacom/2/edit

debe establecer el elemento principal para

display:table-cell;
vertical-align:middle;
text-align:center;