web-dev-qa-db-fra.com

Comment centrer verticalement le contenu de divs enfants à l'intérieur de div div dans une présentation fluide

J'ai une div qui contient deux divs enfants, et ils sont destinés à faire partie d'une mise en page fluide, donc je ne peux pas leur définir de taille fixe en px.

Il y a deux objectifs ici:

  1. Alignez les deux divs enfants horizontalement, ce que j’ai réalisé en utilisant float: left et float: right respectivement.

  2. Centrer verticalement le texte (dans les divs enfants) par rapport au div parent. Le texte est court et prend une seule ligne par conception.

Ce que j'ai maintenant: http://jsfiddle.net/yX3p9/

Apparemment, les deux divs enfants ne prennent pas toute la hauteur du div parent et leur texte n'est donc pas centré verticalement par rapport au div parent.

Conceptuellement, pour atteindre les objectifs ci-dessus, nous pouvons soit centrer verticalement les divisions enfant dans la division parent, soit les faire prendre à la hauteur de la division parent Quelle est la manière robuste de le faire?

* Prise en charge des navigateurs: IE 9+ et les autres navigateurs modernes.

htmlcsshtml5css3
20
MLister

J'ai mis à jour votre violon: http://jsfiddle.net/yX3p9/7/

J'ai utilisé display: table-cell; afin d'utiliser vertical-align: middle;

18
Ferdinand Torggler

Je préfère l'utilisation de transformer ci-dessus les réponses ci-dessus.

top: 50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

D'après mon expérience, cela fonctionne dans de nombreuses situations et sur tous les principaux navigateurs ( même IE9 + ).

Si vous utilisez SCSS, vous voudrez peut-être même implémenter ce mixin:

@mixin v-align($position: absolute){
    position: $position;  top: 50%;  
    transform: translateY(-50%);
    -ms-transform:translateY(-50%); /* IE */
    -moz-transform:translateY(-50%); /* Firefox */
    -webkit-transform:translateY(-50%); /* Safari and Chrome */
    -o-transform:translateY(-50%);
}
32
Bart Burg

Utilisez line-height. S'il ne s'agit que d'une ligne de texte, une hauteur de ligne élevée le positionnera efficacement au centre de la ligne.

Ou essayez display:table-cell en combinaison avec vertical-align.

5
DanMan

En plus d'utiliser des tables CSS, vous pouvez également utiliser le positionnement absolu pour obtenir une mise en page similaire.

En utilisant votre HTML tel quel (sans élément supplémentaire), appliquez le CSS suivant:

html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}
.parent {
    background-color: grey;
    height: 20%;
    line-height: 1.6em;
    font-size: 1.6em;
    min-height: 1.6em;
    position: relative;
}
.left, .right {
    position: absolute;
    top: 50%;
    margin-top: -0.8em;
}
.left {
    background-color: yellow;
    padding-left: 20px;
    left: 0;
}
.right {
    background-color: red;
    padding-right: 20px;
    right: 0;
}

Vous pouvez voir le violon de démonstration à: http://jsfiddle.net/audetwebdesign/cByHa/

Dans le conteneur .parent, définissez line-height sur une valeur explicite (1.6em pour la taille de la police), position: relative et min-height, afin de conserver une hauteur suffisante pour le texte.

Les deux éléments enfants .left et .right sont positionnés de manière absolue avec top: 50%.__ et utilisent margin-top: -0.8em pour obtenir le centrage vertical (utilisez la moitié de la valeur line-height).

Utilisez les décalages gauche et droit (ou le remplissage) pour ajuster la position horizontale des éléments enfants si nécessaire.

3
Marc Audet
    html, body {
    height: 100%;
    width: 100%;
    font-size: 13px;
}

.parent {
    height: 50px;
    background-color: grey;
    font-size: 1.6em;
}

.left {
    margin-left: 2%;
    float: left;
    background-color: yellow;
    height:100%;   
}

.right {
    margin-right: 2%;
    float: right;
    background-color: red;
    height:100%;    
}
.parent span{
    display:table;
    height:100%;
}
.parent em{
    display:table-cell;
    vertical-align:middle;

}

http://jsfiddle.net/yX3p9/13/

0
QArea