wake-up-neo.com

CSS: Div vertikal ausrichten, wenn keine feste Größe des Div bekannt ist

Wie richte ich einen <div> aus, der ein Bild (oder Flash) vertikal mit CSS enthält? Höhe und Breite sind dynamisch.

45
Oleg Tarasenko

Dies ist eine reine CSS2-Lösung für die horizontale und vertikale Zentrierung ohne bekannte Größen von Containern oder untergeordneten Elementen. Es sind keine Hacks beteiligt. Ich habe es für diese Antwort entdeckt, und ich habe es auch in diese Antwort gezeigt.

Die Lösung basiert auf vertical-align: middle in Verbindung mit line-height: 0, wobei das übergeordnete Element eine feste Zeilenhöhe hat.

Das HTML:

<span id="center">
    <span id="wrap">
        <img src="http://lorempixum.com/300/250/abstract" alt="" />
    </span>
</span>

Und das CSS:

html,
body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#center {
    position: relative;
    display: block;
    top: 50%;
    margin-top: -1000px;
    height: 2000px;
    text-align: center;
    line-height: 2000px;
}    
#wrap {
    line-height: 0;
}
#wrap img {
    vertical-align: middle;
}

Getestet unter Windows 7 in IE8, IE9, Opera 11.51, Safari 5.0.5, FF 6.0, Chrome 13.0.

Der einzige Nachteil ist IE7, für den die zwei innersten Elemente an einer Zeile deklariert werden müssen, wie in dieser Geige gezeigt wird:

<span id="center">
    <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span>
</span>

Beachten Sie, dass die Bereiche auch für IE7 erforderlich sind. In jedem anderen Browser kann der Bereich div sein.

45
NGLN

Sie können dies tun, indem Sie Inline-Blöcke verwenden, einer mit height: 100% (und denselben Höhen für HTML und BODY) und vertical-align: middle.

Beispiel 1: http://jsfiddle.net/kizu/TQX9b/ (viel Inhalt, also volle Breite)

Beispiel 2: http://jsfiddle.net/kizu/TQX9b/2/ (ein Bild mit beliebiger Größe)

In diesem Beispiel verwende ich spans, also würde es in IE ohne Hacks funktionieren. Wenn Sie divs verwenden möchten, vergessen Sie nicht, bedingte Kommentare für IE .helper, .content { display: inline; zoom: 1; } hinzuzufügen, also Inline-Blöcke würde für Blockelemente funktionieren.

12
kizu

Neben den anderen Antworten können Sie dies unter anderem mit dem CSS3 flexible Box-Modell erreichen.

Sie benötigen nur ein einzelnes Containerelement. Alles, was sich darin befindet, wird nach den Regeln der flexiblen Box-Modelle ausgelegt.

<div class="container">
    <img src="/logo.png"/>
</div>

Das CSS ist eigentlich ziemlich einfach:

.container { 
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Ich habe der Kürze halber die Regeln des Anbieters weggelassen.

Hier ist eine Demo, in der sich das Bild immer in der Mitte der Seite befindet: http://jsfiddle.net/zn8bm/

Beachten Sie, dass es sich bei Flexbox um eine noch junge Spezifikation handelt, die derzeit nur in Safari, Chrome und Firefox 4+ implementiert ist.

8
Chris

Ich würde diese Lösung von Bruno empfehlen: http://www.brunildo.org/test/img_center.html

Ich bin jedoch auf ein Problem mit seiner Lösung mit dem Webkit gestoßen. Es scheint, dass das Webkit ein kleines Leerzeichen am oberen Rand der div wiedergibt, wenn die leere span dort sein darf. Also füge ich für meine Lösung nur die leere Spanne hinzu, wenn ich feststelle, dass der Browser IE ist (wenn jemand herausfindet, wie der Speicherplatz entfernt werden kann, lassen Sie es mich wissen!).


HTML:

<div class="outerdiv">
    <img src="..." /> 
</div>

CSS:

.outerdiv {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
}
.ie_vertical_align * {
    vertical-align: middle;
}
.ie_vertical_align span {
    display: inline-block;
    height: 150px;
    width: 0;
}

Und wenn ich feststelle, dass der Browser IE ist, füge ich vor dem Tag img ein leeres span-Element und einen CSS-Stil hinzu, sodass es so aussieht:

<div class="outerdiv ie_vertical_align">
    <span></span>
    <img src="..." /> 
</div>

Hier ist ein JSFiddle mit diesem Code.

4
rcl

Dušan Janovský, tschechischer Webentwickler, hat vor einiger Zeit eine Cross-Browser-Lösung veröffentlicht. Lesen http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

2
duri

Wenn Sie sich nicht für IE7 und darunter interessieren, müssen Sie nicht mehrere verschachtelte Divs verwenden. Wenn Sie ein div haben, das Sie vertikal ausrichten möchten, befindet sich dieses div in einem Container (auch wenn der Container Ihr <body> ist). Daher können Sie display: table-cell und vertical-align: middle im Container angeben, und dann wird Ihr Div vertikal zentriert.

Wenn Sie sich jedoch für IE7 und darunter interessieren, benötigen Sie einen zusätzlichen Container (ja, über einen Hack).

Schauen Sie sich die diese Geige an. Es wird in IE6-9 und anderen wichtigen Browsern korrekt angezeigt. #container2 ist nur für IE7 und darunter verfügbar. Wenn Sie sich nicht für sie interessieren, können Sie sie sowie die IE-spezifischen Bedingungsstile entfernen.

1
Artyom

probieren Sie den 50% -Padding-Trick aus: 

<html>

<body style="width:50%; height: 50%;">
<div style="display:block; display:inline-block; layout-grid:line; 
     text-align:center; vertical-align:bottom; 
     padding: 50% 0 50% 0">test</div>
</body>

</html>
0
RetroCoder

Legen Sie das Bild als Hintergrund für das div fest und richten Sie es in der Mitte aus