web-dev-qa-db-fra.com

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

J'essaie simplement de centrer le texte horizontalement et verticalement à l'aide de DIV et d'afficher le type sous forme 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?

csshtmlalignment
55
mattgcon

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

43
meder omuraliev

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 .

40
Shaquin

Vous pouvez aligner verticalement un élément flottant de manière à fonctionner sur IE 6+. Il n'a pas besoin non plus d'un balisage complet de table. Cette méthode n'est pas parfaitement propre - comprend les emballages et quelques éléments à prendre en compte, par exemple, si vous avez trop de texte sur le conteneur - mais c'est assez bon.

Réponse courte: Vous devez juste appliquer display: table-cell à un élément inside l’élément flottant (les cellules du tableau ne flottent pas), et utilise un repli avec position: absolute et top pour l'ancien IE.

Réponse longue: Voici un jsfiddle montrant les bases . Les choses importantes résumées (avec un commentaire conditionnel ajoutant une classe .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;
    }

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

  • Dans les navigateurs standard, le contenu dépassant la hauteur de l'élément wrapper cesse de centrer et commence à descendre la page. Ce n’est pas un gros problème (semble mieux que de grimper dans la page), et peut être évité en évitant un contenu trop volumineux (notez que si j’ai oublié quelque chose, des méthodes de débordement telles que overflow: auto; ne semble pas fonctionner
  • Dans l'ancienne IE, l'élément de contenu ne s'étend pas pour remplir l'espace disponible - la hauteur correspond à la hauteur du contenu, pas du conteneur.

Ce sont des limitations assez mineures, mais il faut en être conscient.

Code et idée adaptés à partir d'ici

9
user568458

Un élément nommé comme suit sera aligné verticalement au milieu:

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

Cependant, l'élément parent doit avoir une hauteur fixe. Voir ce violon: https://jsfiddle.net/15d0qfdg/12/

6
gm2008

Dans mon cas, je voulais centrer dans un conteneur parent avec position: absolute.

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

J'ai dû ajouter un peu de positionnement pour haut, bas, gauche et droite.

.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
}
5
A. D'Alfonso

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;
5
Xieranmaya

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>
3
Strikersz7

Parfois, les flotteurs freinent l'alignement vertical, il est préférable de les éviter.

2
Munteanu Sergiu

Float avec un autre wrapper sans utiliser display: table;, Ça marche:

<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>
1
Antonio Ooi

Définissez la hauteur de l'élément parent.

1
bhaity