CSS vertical-align propriété ne fonctionne pas

Hé là, j'ai le code CSS suivant:

.parent
{
    position : 'absolute';
    top : '50px';
    left : '50px';
    width : '400px';
    height : '160px';
    padding : '10px';
    border : '2px solid';
    border-color : '#444444';
    background-color : '#FF0000';
    text-align : 'center';
    /*display : inline; tried this also and didn't work.*/
}

.child
{
    color : '#123456';
    font-size : '16px';
    font-family : 'Arial';
    vertical-align : 'middle';
}

Je veux juste mettre l'enfant est contenu dans le centre (x et y) de la div parent, mais cela ne fonctionne pas, il ne me montre le texte dans le côté supérieur de l'élément parent. Toute suggestion? merci.

Pourquoi il y a des guillemets autour de toutes les valeurs de propriété?
Je suis désolé, j'ai juste fait une traduction rapide d'une classe JavaScript je suis en train de faire et j'ai oublié de les enlever.

OriginalL'auteur Neo | 2013-04-25

  1. 14

    vertical-align a une trompant de nom. Il ne fait pas les aligner verticalement les éléments de la manière que vous pensez que cela fonctionne.

    Si votre enfant a une seule ligne de texte, vous pouvez utiliser le line-height truc pour le centre:

    .parent {
    line-height: 160px; /* Height of the parent */
}

    Démo: http://jsfiddle.net/vVAdZ/

    Une autre façon est-à-faux d'une table:

    .parent {
    display: table;
}

.child {
    display: table-cell;
    vertical-align: middle;
}

    Démo: http://jsfiddle.net/vVAdZ/3/

    J'ai 3 divs à l'intérieur de la div parent, le div parent a sa largeur / hauteur et je veux mettre tous dans le milieu de l'ensemble de la div parent.
    Parfait! fonctionne très bien, (il m'a fallu des heures pour trouver la solution lol) merci à tout le monde..
    note: display: table ne fonctionne pas sur IE7 ou moins.
    Je ne peux pas imaginer la hauteur de la ligne est une solution valable. Ce sujet de lignes que de l'attelle ou un non-fixe-hauteur de parent?

    OriginalL'auteur Blender

  2. 2

    Perdre les citations dans votre les valeurs des propriétés CSS et ajouter line-height: 160px;.parent

    OriginalL'auteur C3P-Bro

  3. 2

    Prendre toute la largeur de l'est, qui dans ce cas est de 400, et de diviser par 2 pour la moitié de la div. Puis prendre la moitié de la hauteur 160, et de diviser par 2 pour la moitié de la hauteur, et vous devriez obtenir le centre.

    OriginalL'auteur user2277872