Ik'ben op zoek naar een manier om de container
div verticaal te centreren binnen de jumbotron
en in het midden van de pagina te zetten.
De .jumbotron
moet aangepast worden aan de volledige hoogte en breedte van het scherm. De .container
div heeft een breedte van 1025px
en moet in het midden van de pagina staan (verticaal centreren).
Ik wil dat op deze pagina de jumbotron zich aanpast aan de hoogte en breedte van het scherm, samen met de container verticaal gecentreerd aan de jumbotron. Hoe kan ik dit bereiken?
.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>
Verticale uitlijning is nu heel eenvoudig door het gebruik van Flexibele box layout. Tegenwoordig wordt deze methode ondersteund in een breed scala van webbrowsers, behalve Internet Explorer 8 & 9. Daarom zouden we'moeten gebruiken sommige hacks/polyfills of verschillende benaderingen voor IE8/9.
In het volgende laat ik je zien hoe je dat kunt doen in slechts 3 regels tekst (ongeacht de oude flexbox syntaxis).
Note: het'is beter om een extra klasse te gebruiken in plaats van .jumbotron
aan te passen om de verticale uitlijning te bereiken. Ik'zou bijvoorbeeld vertical-center
class name gebruiken.
[Voorbeeld hier][5] (Een Spiegel op 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;
}
Belangrijke opmerkingen (Overwogen in de demo):
Een percentage waarde van height
of min-height
eigenschappen is relatief ten opzichte van de height
van het parent element, daarom moet je de height
van de parent expliciet opgeven.
Vendor prefixed / oude flexbox syntax weggelaten in de geposte snippet wegens beknoptheid, maar bestaan in het online voorbeeld.
In sommige van oude webbrowsers zoals Firefox 9 (waarin ik'heb getest), de flex container - .vertical-center
in dit geval - zal'niet de beschikbare ruimte binnen de ouder innemen, daarom moeten we de breedte
eigenschap specificeren zoals: width: 100%
.
Ook in sommige web browsers, zoals hierboven vermeld, kan het voorkomen dat het flex item - .container
in dit geval - horizontaal niet in het midden verschijnt. Het lijkt erop dat de toegepaste links/rechts margin
van auto
geen effect heeft op het flex item.
Daarom moeten we het uitlijnen door box-pack / justify-content
.
Voor verdere details en/of het verticaal uitlijnen van kolommen, kunt u het onderstaande onderwerp raadplegen:
Dit is het oude antwoord dat ik schreef op het moment dat ik deze vraag beantwoordde. Deze methode is besproken hier en het'wordt verondersteld ook te werken in Internet Explorer 8 en 9. Ik'zal het in het kort uitleggen:
In inline flow kan een inline level element verticaal naar het midden worden uitgelijnd door vertical-align: middle
declaratie. Spec van W3C:
middle Lijn het verticale midden van de box uit met de basislijn van de parent box plus de helft van de x-hoogte van de parent.
In gevallen dat de parent - .vertical-center
element in dit geval - een expliciete hoogte
heeft, zouden we, als we toevallig een child element zouden kunnen hebben met exact dezelfde hoogte
van de parent, in staat zijn om de basislijn van de parent te verplaatsen naar het midden van het full-height child en verrassend genoeg ons gewenste in-flow child - de .container
- verticaal uitgelijnd naar het midden te maken.
Dit gezegd zijnde, kunnen we een full-height element binnen de .vertical-center
maken door ::before
of ::after
pseudo-elementen en ook het standaard display
type van het en het andere kind, de .container
veranderen in inline-block
.
Gebruik dan vertical-align: middle;
om de inline elementen verticaal uit te lijnen.
Hier ga je:
<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;
}
Om onverwachte problemen in extra kleine schermen te voorkomen, kunt u de hoogte van het pseudo-element terugzetten op auto
of 0
of het display
type wijzigen in none
als dat nodig is:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
En nog één ding:
Als er footer
/header
secties rond de container staan, is het'beter om die elementen goed te positioneren (relatief
, absoluut
? up to you.) en een hogere z-index
waarde toe te voegen (voor zekerheid) om ze altijd bovenaan de anderen te houden.
voeg Bootstrap.css toe en voeg dit toe aan je css
Dit is de 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;
}
Roep nu in je pagina
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Mijn voorkeurstechniek:
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;
}
Zie ook [deze Fiddle][1]!