L'alignement vertical des cellules de la table Div ne fonctionne pas

Question

J'essaie simplement de centrer le texte horizontalement et verticalement à l'aide de DIV et d'afficher le type de tableau, mais cela ne fonctionne pas dans IE8 ni dans Firefox.

Ci-dessous, le CSS que j'utilise et c’est tout ce qui se trouve dans la page 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'est-ce que je fais mal?

Answer 1

Je pense que table-cell doit avoir un élément parent display:table .

Answer 2

Voici comment je le fais:

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>
 

Voir

Exemple de centrage vertical

et

CSS: centrer les choses .

Answer 3

Vous pouvez aligner verticalement une flottait élément dans une manière qui fonctionne sur IE 6+. Il n'a pas besoin de table de balisage soit. Cette méthode n'est pas parfaitement propre - comprend des wrappers et il y a quelques choses à être conscient de, par exemple, si vous avez trop de texte outspilling le conteneur, mais il est assez bon.

---

Réponse courte: Vous avez juste besoin d'appliquer display: table-cell d'un élément à l'intérieur de la flottait élément (tableau, les cellules ne flotte pas), et d'utiliser une solution de repli avec position: absolute et top pour les vieux IE.

---

Réponse longue: Voici un jsfiddle montrer les bases. Les choses importantes résumés (avec un commentaire conditionnel de l'ajout d'une .vieux-ie de la classe):

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

Voici un jsfiddle délibérément mettre en évidence les fautes mineures avec cette méthode. Notez comment:

• Dans les normes des navigateurs, le contenu dépasse la hauteur de l'élément wrapper cesse de centrage et commence à descendre la page. Ce n'est pas un gros problème (probablement meilleur que répand sur la page), et peut être évité en évitant le contenu qui est trop grand (à noter que, sauf si j'ai oublié quelque chose, dépassement de méthodes comme l' overflow: auto; ne semble pas fonctionner)
• Dans les vieux IE, le contenu de l'élément n'est pas de s'étirer pour remplir l'espace disponible - la hauteur est la hauteur du contenu, pas le contenant.

Ceux-ci sont assez mineure des limites, mais vaut la peine d'être conscient de.

Code de l'idée et adapté à partir d'ici

Answer 4

voir cette corbeille: http://jsbin.com/yacom/2/edit

devrait définir l'élément parent à

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

Answer 5

Parce que tu utilises encore float ...

essayez de supprimer "float" et de l'envelopper avec display: table

exemple :

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