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;