I'm looking for a way to vertically center the container
div inside the jumbotron
and to set it in the middle of the page.
The .jumbotron
musi być dostosowany do pełnej wysokości i szerokości ekranu. The .container
div ma szerokość 1025px
i powinien znajdować się na środku strony (pionowo wyśrodkowany).
Chcę, aby ta strona miała jumbotron dostosowany do wysokości i szerokości ekranu wraz z kontenerem pionowo wyśrodkowanym względem jumbotronu. Jak mogę to osiągnąć?
.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>
Wyrównanie pionowe jest teraz bardzo proste dzięki użyciu Flexible box layout. Obecnie, ta metoda jest obsługiwana w szerokim zakresie przeglądarek internetowych z wyjątkiem Internet Explorer 8 & 9. Dlatego będziemy musieli użyć kilku hacków/polyfills lub różnych podejść dla IE8/9.
Poniżej pokażę Ci jak to zrobić w zaledwie 3 linijkach tekstu (niezależnie od starej składni flexbox).
Uwaga: lepiej jest użyć dodatkowej klasy zamiast zmieniać .jumbotron
, aby osiągnąć pionowe wyrównanie. Ja'użyłbym na przykład nazwy klasy vertical-center
.
[Przykład tutaj][5] (A Mirror na 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;
}
Important notes (Considered in the demo):
Wartość procentowa właściwości height
lub min-height
jest względna w stosunku do height
elementu nadrzędnego, dlatego należy jawnie określić height
elementu nadrzędnego.
Vendor prefixed / stara składnia flexbox pominięta w zamieszczonym snippecie ze względu na zwięzłość, ale istnieje w przykładzie online.
W niektórych starych przeglądarkach, takich jak Firefox 9 (w której testowałem), kontener flex - .vertical-center
w tym przypadku - nie zajmie dostępnej przestrzeni wewnątrz rodzica, dlatego musimy określić właściwość width
jak: width: 100%
.
Również w niektórych przeglądarkach internetowych, jak wspomniano powyżej, element flex - .container
w tym przypadku - może nie pojawić się na środku w poziomie. Wygląda na to, że zastosowany lewy/prawy margin
z auto
nie ma żadnego wpływu na element flex.
Dlatego musimy wyrównać go przez box-pack / justify-content
.
Aby uzyskać więcej szczegółów i/lub pionowe wyrównanie kolumn, możesz odwołać się do tematu poniżej:
To jest stara odpowiedź, którą napisałem w czasie, gdy odpowiadałem na to pytanie. Ta metoda została omówiona tutaj i przypuszcza się, że działa również w Internet Explorerze 8 i 9. I'll wyjaśnić to w skrócie:
W przepływie inline, element poziomu inline może być wyrównany pionowo do środka przez vertical-align: middle
deklarację. Spec od W3C:
middle. Wyrównaj pionowy punkt środkowy pola z linią bazową pola nadrzędnego plus połowa wysokości x rodzica.
W przypadkach, gdy rodzic - .vertical-center
element w tym przypadku - ma wyraźną wysokość
, przez przypadek, jeśli moglibyśmy mieć element dziecka mający dokładnie taką samą wysokość
rodzica, bylibyśmy w stanie przesunąć linię bazową rodzica do punktu środkowego dziecka o pełnej wysokości i zaskakująco uczynić nasze pożądane dziecko w przepływie - .container
- wyrównane do środka w pionie.
To powiedziawszy, moglibyśmy stworzyć element full-height wewnątrz .vertical-center
przez ::before
lub ::after
pseudo elementy i również zmienić domyślny typ display
tego i drugiego dziecka, .container
na inline-block
.
Następnie użyj vertical-align: middle;
aby wyrównać elementy inline w pionie.
Proszę bardzo:
<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;
}
Ponadto, aby zapobiec nieoczekiwanym problemom na bardzo małych ekranach, możesz zresetować wysokość pseudoelementu do auto
lub 0
lub zmienić jego typ display
na none
, jeśli jest to potrzebne:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
I jeszcze jedna rzecz:
Jeśli wokół kontenera znajdują się sekcje footer
/header
, to'lepiej jest odpowiednio wypozycjonować te elementy (relative
, absolute
? zależy od Ciebie.) i dodać wyższą wartość z-index
(dla pewności), aby zawsze były na wierzchu pozostałych.
dodaj Bootstrap.css następnie dodaj to do swoich css
To jest 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;
}
Teraz wywołaj na swojej stronie
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Moja ulubiona technika :
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;
}
Zobacz także [to skrzypce][1]!