Ich suche nach einer Möglichkeit, das "Container"-Div innerhalb des "Jumbotron" vertikal zu zentrieren und in die Mitte der Seite zu setzen.
Das .jumbotron
muss an die volle Höhe und Breite des Bildschirms angepasst werden. Das .container
div hat eine Breite von 1025px
und sollte sich in der Mitte der Seite befinden (vertikal zentriert).
Ich möchte, dass diese Seite das Jumbotron an die Höhe und Breite des Bildschirms anpasst und der Container vertikal in der Mitte des Jumbotrons steht. Wie kann ich das erreichen?
.jumbotron {
height:100%;
width:100%;
}
.container {
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="jumbotron">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg"></div>
</div>
<div class="col-md-5 iPhone-features" style="margin-left:-25px;">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
Die Vertikale Ausrichtung ist jetzt sehr einfach durch die Verwendung von Flexible box layout. Heutzutage wird diese Methode in einer breiten Palette von Webbrowsern mit Ausnahme von Internet Explorer 8 & 9 unterstützt. Daher müssen wir einige Hacks/Polyfills oder andere Ansätze für IE8/9 verwenden.
Im Folgenden zeige ich Ihnen, wie Sie das in nur 3 Zeilen Text (unabhängig von der alten Flexbox-Syntax) erreichen können.
Anmerkung: Es ist besser, eine zusätzliche Klasse zu verwenden, anstatt .jumbotron
zu verändern, um die vertikale Ausrichtung zu erreichen. Ich würde zum Beispiel die Klasse vertical-center
verwenden.
[Beispiel hier][5] (Eine Spiegelung auf jsbin).
<div class="jumbotron vertical-center"> <!--
^--- Added class -->
<div class="container">
...
</div>
</div>
.vertical-center {
min-height: 100%; /* Fallback for browsers do NOT support vh unit */
min-height: 100vh; /* These two lines are counted as one :-) */
display: flex;
align-items: center;
}
Wichtige Hinweise (In der Demo berücksichtigt):
Ein Prozentwert der Eigenschaften Höhe
oder Min-Höhe
ist relativ zur Höhe
des übergeordneten Elements, daher sollten Sie die Höhe
des übergeordneten Elements explizit angeben.
Die vom Hersteller vorangestellte / alte Flexbox-Syntax wurde im geposteten Snippet aus Gründen der Kürze weggelassen, ist aber im Online-Beispiel vorhanden.
In einigen alten Webbrowsern wie Firefox 9 (in dem ich getestet habe), wird der Flexcontainer - .vertical-center
in diesem Fall - nicht den verfügbaren Platz innerhalb des Elternteils einnehmen, daher müssen wir die Eigenschaft width
wie angeben: width: 100%
.
Auch in einigen Web-Browsern, wie oben erwähnt, kann das Flex-Element - in diesem Fall .container
- nicht in der Mitte horizontal erscheinen. Es scheint, dass der angewandte linke/rechte Rand
von auto
keine Auswirkung auf das flexible Element hat.
Daher müssen wir es mit box-pack / justify-content
ausrichten.
Für weitere Details und/oder die vertikale Ausrichtung von Spalten, können Sie sich auf das folgende Thema beziehen:
Dies ist die alte Antwort, die ich geschrieben habe, als ich diese Frage beantwortet habe. Diese Methode wurde bereits hier besprochen und soll auch im Internet Explorer 8 und 9 funktionieren. Ich werde es kurz erklären:
Im Inline-Flow kann ein Element der Inline-Ebene durch die Deklaration vertical-align: middle
vertikal in der Mitte ausgerichtet werden. Spezifikation von W3C:
middle Richtet den vertikalen Mittelpunkt der Box an der Grundlinie der übergeordneten Box plus der halben x-Höhe der übergeordneten Box aus.
In Fällen, in denen das übergeordnete Element - in diesem Fall das Element .vertical-center
- eine explizite Höhe
hat, könnten wir, wenn wir zufällig ein untergeordnetes Element hätten, das genau die gleiche Höhe
des übergeordneten Elements hat, die Grundlinie des übergeordneten Elements auf den Mittelpunkt des untergeordneten Elements mit voller Höhe verschieben und überraschenderweise unser gewünschtes untergeordnetes Element - den .container
- vertikal in der Mitte ausrichten lassen.
Abgesehen davon könnten wir ein Element mit voller Höhe innerhalb des .vertical-center
durch ::before
oder ::after
Pseudo-Elemente erzeugen und auch den standardmäßigen display
-Typ von diesem und dem anderen Kind, dem .container
, auf inline-block
ändern.
Verwenden Sie dann vertical-align: middle;
, um die Inline-Elemente vertikal auszurichten.
So geht's:
<div class="jumbotron vertical-center">
<div class="container">
...
</div>
</div>
.vertical-center {
height:100%;
width:100%;
text-align: center; /* align the inline(-block) elements horizontally */
font: 0/0 a; /* remove the gap between inline(-block) elements */
}
.vertical-center:before { /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.vertical-center > .container {
max-width: 100%;
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
/* reset the font property */
font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Um unerwartete Probleme auf besonders kleinen Bildschirmen zu vermeiden, können Sie die Höhe des Pseudo-Elements auf auto
oder 0
zurücksetzen oder seinen Display
-Typ auf none
ändern, falls dies erforderlich ist:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
Und noch eine Sache:
Wenn es Fußzeilen
/Kopfzeilen
um den Container herum gibt, ist es besser, diese Elemente richtig zu positionieren (relativ
, absolut
? liegt an Ihnen.) und einen höheren z-index
Wert hinzuzufügen (zur Sicherheit), damit sie immer über den anderen stehen.
fügen Sie Bootstrap.css hinzu und fügen Sie dann Folgendes zu Ihrem css hinzu
Dies ist die Css
html, body{height:100%; margin:0;padding:0}
.container-fluid{
height:100%;
display:table;
width: 100%;
padding: 0;
}
.row-fluid {height: 100%; display:table-cell; vertical-align: middle;}
.centering {
float:none;
margin:0 auto;
}
Rufen Sie nun in Ihrer Seite
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Meine bevorzugte Technik :
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="jumbotron vertical-center">
<div class="container text-center">
<h1>The easiest and powerful way</h1>
<div class="row">
<div class="col-md-7">
<div class="top-bg">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="col-md-5 iPhone-features">
<ul class="top-features">
<li>
<span><i class="fa fa-random simple_bg top-features-bg"></i></span>
<p><strong>Redirect</strong><br>Visitors where they converts more.</p>
</li>
<li>
<span><i class="fa fa-cogs simple_bg top-features-bg"></i></span>
<p><strong>Track</strong><br>Views, Clicks and Conversions.</p>
</li>
<li>
<span><i class="fa fa-check simple_bg top-features-bg"></i></span>
<p><strong>Check</strong><br>Constantly the status of your links.</p>
</li>
<li>
<span><i class="fa fa-users simple_bg top-features-bg"></i></span>
<p><strong>Collaborate</strong><br>With Customers, Partners and Co-Workers.</p>
</li>
<a href="pricing-and-signup.html" class="btn-primary btn h2 lightBlue get-Started-btn">GET STARTED</a>
<h6 class="get-Started-sub-btn">FREE VERSION AVAILABLE!</h6>
</ul>
</div>
</div>
</div>
</div>
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Siehe auch [dieses Fiddle][1]!