it-swarm.com.de

So zentrieren Sie den Inhalt von untergeordneten divs innerhalb eines übergeordneten div in einem flüssigen Layout vertikal

Ich habe ein div, das zwei untergeordnete divs enthält, und sie sollen Teil eines flüssigen Layouts sein, daher kann ich keine feste Größe für sie in px festlegen.

Hier gibt es zwei Ziele:

  1. Richten Sie die beiden untergeordneten divs horizontal aus, was ich mit float: left bzw. float: right erreicht habe.

  2. Zentrieren Sie den Text (innerhalb der untergeordneten Divs) relativ zum übergeordneten Div vertikal. Der Text ist kurz und dauert nur eine Zeile.

Was ich jetzt habe: http://jsfiddle.net/yX3p9/

Offensichtlich nehmen die beiden untergeordneten Divs nicht die volle Höhe des übergeordneten Divs an, und ihr Text ist daher nicht vertikal zum übergeordneten Div zentriert.

Um die oben genannten Ziele zu erreichen, können wir konzeptuell festlegen, dass die untergeordneten Divs vertikal innerhalb des übergeordneten Divs zentriert werden oder dass die untergeordneten Divs die volle Höhe des übergeordneten Div annehmen. Was ist der robuste Weg, dies zu tun?

* Browser-Unterstützung: IE 9+ und andere gängige moderne Browser.

20
MLister

Ich habe Ihre Geige aktualisiert: http://jsfiddle.net/yX3p9/7/

Ich habe display: table-cell; verwendet, um vertical-align: middle; zu verwenden.

18

Ich bevorzuge die Verwendung von transform oberhalb der obigen Antworten.

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

Meiner Erfahrung nach funktioniert es in vielen Situationen und auf allen gängigen Browsern ( sogar IE9 + ).

Wenn Sie SCSS verwenden, können Sie dieses Mixin sogar implementieren:

@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

Verwenden Sie line-height. Wenn es sich nur um eine Textzeile handelt, wird der Text bei hoher Zeilenhöhe effektiv in der Mitte der Zeile positioniert.

Oder versuchen Sie display:table-cell in Kombination mit vertical-align.

5
DanMan

Neben der Verwendung von CSS-Tabellen können Sie auch die absolute Positionierung verwenden, um ein ähnliches Layout zu erhalten.

Wenden Sie mit Ihrem HTML-Code (ohne zusätzliche Elemente) das folgende CSS an:

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

Die Demo-Geige finden Sie unter: http://jsfiddle.net/audetwebdesign/cByHa/

Legen Sie im .parent-Container die Zeilenhöhe auf einen expliziten Wert (1.6em als Schriftgröße), position: relative und min-height fest, um genügend Höhe für den Text beizubehalten.

Die beiden untergeordneten Elemente .left und .right werden absolut mit top: 50% Positioniert und verwenden margin-top: -0.8em, um die vertikale Zentrierung zu erhalten (verwenden Sie die Hälfte des Zeilenhöhenwerts).

Verwenden Sie den linken und rechten Versatz (oder das Auffüllen), um die horizontale Position der untergeordneten Elemente nach Bedarf anzupassen.

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