Jak wyśrodkować kontener w pionie w bootstrap
Szukam sposobu na pionowe wyrównanie container
div wewnątrz jumbotron
i ustawienie go na środku strony.
{[5] } musi być dostosowany do pełnej wysokości i szerokości ekranu, więc użyłem tego CSS.
.jumbotron{
heght:100%;
width:100%;
}
.container
div ma szerokość 1025px
i powinien znajdować się na środku strony (środek pionowo).
.container{
width:1025px;
}
.jumbotron .container {
max-width: 100%;
}
Mój HTML jest jak
<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>
Więc chcę, aby ta strona miała jumbotron dostosowany do wysokości i szerokości ekranu wraz z Pojemnik pionowo wyśrodkowany do jumbotronu. Jak mogę to osiągnąć?
7 answers
The Flexible box way
Wyrównanie w pionie jest teraz bardzo proste dzięki zastosowaniu elastycznego układu pudełek. Obecnie, metoda ta jest obsługiwana w szerokim zakresie przeglądarek internetowych z wyjątkiem Internet Explorer 8 i 9. Dlatego musimy użyć kilku hacków/polyfills lub różnych podejść dla IE8 / 9.
Poniżej pokażę Ci, jak to zrobić tylko w 3 linijkach tekstu (niezależnie od Starego flexboxa składnia) .
Uwaga: lepiej użyć dodatkowej klasy zamiast zmieniać .jumbotron
, aby uzyskać wyrównanie pionowe. Użyłbym na przykład vertical-center
nazwy klasy.
Przykład tutaj (A Lustro 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;
}
Ważne uwagi (rozważane w demo):
A procent wartości właściwości
height
lubmin-height
jest względemheight
z element rodzica, dlatego należy jawnie podaćheight
rodzica.Składnia Vendor prefixed / old flexbox pominięta w opublikowanym fragmencie ze względu na zwięzłość, ale istnieje w przykładzie online.
W niektórych starych przeglądarkach internetowych, takich jak Firefox 9 (w którym testowałem) , kontener flex -
.vertical-center
w tym przypadku-nie zajmie dostępnego miejsca 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 poziomo. Wygląda na to, że zastosowana lewa / prawamargin
zauto
nie ma żadnego wpływu na element flex.
Dlatego musimy go wyrównać przezbox-pack / justify-content
.
[39]}tradycyjny sposób dla starszych przeglądarek internetowych
To stara odpowiedź, którą napisałem, gdy odpowiedziałem na to pytanie. Metoda ta została omówiona proszę. i ma działać również w Internet Explorerze 8 i 9. Wyjaśnię to w skrócie:
Inline flow, inline level element może być wyrównany pionowo do środka przez vertical-align: middle
deklaracja. Spec od W3C:
Środek
Wyrównaj pionowy punkt środkowy pola z linią bazową pola nadrzędnego plus połowę wysokości x pola nadrzędnego.
W przypadkach, gdy element rodzica - .vertical-center
w tym przypadku-ma wyraźne height
, w każdym przypadku, gdybyśmy mogli mieć element potomny o dokładnie tym samym height
rodzica, bylibyśmy w stanie przesunąć linię bazową rodzica do środka pełnego wzrostu dziecka i zaskakująco sprawić, że nasze pożądane dziecko in-flow-będzie miało ten sam element. .container
- wyrównany do środka w pionie.
Getting all together
To powiedziawszy, możemy utworzyć element o pełnej wysokości wewnątrz .vertical-center
przez ::before
lub ::after
pseudoelementów, a także zmienić domyślny typ display
tego i drugiego potomka, .container
na inline-block
.
Następnie użyj vertical-align: middle;
, aby wyrównać elementy w linii pionowo.
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;
}
Również, aby zapobiec nieoczekiwanym problemom w bardzo małe ekrany, można zresetować wysokość pseudo-elementu na auto
lub 0
lub zmienić jego typ display
na none
w razie potrzeby:
@media (max-width: 768px) {
.vertical-center:before {
height: auto;
/* Or */
display: none;
}
}
I jeszcze jedno:
Jeśli są footer
/header
sekcje wokół pojemnika, lepiej jest odpowiednio ustawić te elementy (relative
, absolute
? zależy od ciebie.) i dodać wyższą z-index
wartość (dla zapewnienia), aby utrzymać je zawsze na szczycie innych.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:27
Dodaj Bootstrap.css następnie dodaj to do swojego 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;
}
Now call in your page
<div class="container-fluid">
<div class="row-fluid">
<div class="centering text-center">
Am in the Center Now :-)
</div>
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-12-16 08:26:15
Aktualizacja 2018
Bootstrap 4 zawiera flexbox, więc metoda pionowego centrowania jest znacznie łatwiejsza i nie wymaga dodatkowego CSS .
Po prostu użyj klas użytkowych d-flex
i align-items-center
..
<div class="jumbotron d-flex align-items-center">
<div class="container">
content
</div>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-08 10:33:16
W Bootstrap 4:
To wyśrodkuj dziecko poziomo, Użyj klasy bootstrap-4:
justify-content-center
To wyśrodkuj dziecko pionowo, Użyj klasy bootstrap-4:
align-items-center
Ale pamiętaj nie zapomnij użyć D-flex klasa z tymi jest to klasa użytkowa bootstrap-4, Jak tak
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Uwaga: upewnij się, że dodałeś narzędzia bootstrap-4, Jeśli ten kod nie działa
Wiem, że to nie jest bezpośrednia odpowiedź na to pytanie, ale może komuś pomóc
Moja preferowana technika:
body {
display: table;
position: absolute;
height: 100%;
width: 100%;
}
.jumbotron {
display: table-cell;
vertical-align: middle;
}
Demo
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>
[[3]}Zobacz this Fiddle!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-05-19 11:26:48
Testowane w IE, Firfox i Chrome.
CSS:
.parent-container {
position: relative;
height:100%;
width: 100%;
}
.child-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
HTML:
<div class="parent-container">
<div class="child-container">
<h2>Header Text</h2>
<span>Some Text</span>
</div>
</div>
Znalezione na https://css-tricks.com/centering-css-complete-guide/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-20 15:26:49
Oto sposób, w jaki używam do wyrównania zawartości pionowo-Góra / Centrum/dół z bootstrap 3 wiersze:
Oto Demo fiddle: js fiddle
Bootstrap 3 columns with same height and vertically aligned -
/* columns of same height styles */
.row-full-height {
height: 100%;
}
.col-full-height {
height: 100%;
vertical-align: middle;
}
.row-same-height {
display: table;
width: 100%;
/* fix overflow */
table-layout: fixed;
}
.col-xs-height {
display: table-cell;
float: none !important;
}
@media (min-width: 768px) {
.col-sm-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 992px) {
.col-md-height {
display: table-cell;
float: none !important;
}
}
@media (min-width: 1200px) {
.col-lg-height {
display: table-cell;
float: none !important;
}
}
/* vertical alignment styles */
.col-top {
vertical-align: top;
}
.col-middle {
vertical-align: middle;
}
.col-bottom {
vertical-align: bottom;
<div class="container">
<h2>Demo 1</h2>
<div class="row">
<div class="row-same-height">
<div class="col-xs-3 col-xs-height">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra. Integer vestibulum feugiat malesuada. Proin a felis ut libero vestibulum fermentum ut sit amet est. Morbi placerat eget lacus sed sagittis. Nullam eu elit gravida arcu viverra facilisis. Quisque laoreet enim neque, ut consequat sem tincidunt at. Fusce lobortis scelerisque libero, eget vulputate neque. </div>
<div class="col-xs-3 col-xs-height col-top">2st column</div>
<div class="col-xs-3 col-xs-height col-middle">3st column</div>
<div class="col-xs-3 col-xs-height col-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempus tincidunt porttitor. Praesent vehicula aliquam enim. Fusce non luctus eros, sit amet consequat velit. Pellentesque volutpat est et est imperdiet pharetra.</div>
</div>
</div><!-- ./row -->
</div><!-- ./container -->
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-20 16:47:47