Szukam sposobu, aby pionowo wyśrodkować container
div wewnątrz jumbotron
i ustawić go na środku strony.
.jumbotron
Musi być przystosowane do pełnej wysokości i szerokości ekranu. .container
Div ma szerokość 1025px
i powinny być w środku strony (pionowo w środku).
Chcę, aby ta strona dostosowała jumbotron do wysokości i szerokości ekranu wraz z pojemnikiem pionowo wyśrodkowanym do 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>
html
css
twitter-bootstrap
twitter-bootstrap-3
vertical-alignment
użytkownik 1012181
źródło
źródło
Odpowiedzi:
Elastyczny sposób na pudełko
Wyrównanie w pionie jest teraz bardzo proste dzięki zastosowaniu elastycznego układu pudełka . Obecnie ta metoda jest obsługiwana w wielu przeglądarkach internetowych z wyjątkiem Internet Explorera 8 i 9. Dlatego w IE8 / 9 musielibyśmy użyć hacków / polifillów lub różnych podejść .
Poniżej pokażę, jak to zrobić w zaledwie 3 wierszach tekstu (niezależnie od starej składni Flexboksa) .
Uwaga: lepiej jest użyć dodatkowej klasy zamiast zmieniać,
.jumbotron
aby osiągnąć wyrównanie pionowe. Użyłbymvertical-center
na przykład nazwy klasy.Przykład tutaj ( lustro na jsbin) .
Ważne uwagi (rozważane w wersji demo) :
A procentowe wartości
height
lubmin-height
właściwości jest w stosunku doheight
elementu nadrzędnego, dlatego należy określićheight
rodzica wyraźnie.Prefiks dostawcy / stara składnia Flexbox pominięta w opublikowanym fragmencie z powodu zwięzłości, ale istnieją w przykładzie online.
W niektórych starych przeglądarek takich jak Firefox 9 (w którym Przetestowałem) , flex kontenera -
.vertical-center
w tym przypadku - nie odbędzie się w wolnej przestrzeni wewnątrz rodzica, dlatego należy określićwidth
właściwości jak:width: 100%
.Również w niektórych przeglądarkach internetowych, jak wspomniano powyżej, element flex -
.container
w tym przypadku - może nie pojawiać się pośrodku poziomo. Wydaje Zastosowana w lewo / prawomargin
oauto
nie ma żadnego wpływu na pozycję Flex.Dlatego musimy to wyrównać
box-pack / justify-content
.Więcej informacji i / lub pionowe wyrównanie kolumn można znaleźć w poniższym temacie:
Tradycyjny sposób dla starszych przeglądarek internetowych
To stara odpowiedź, którą napisałem w chwili, gdy odpowiedziałem na to pytanie. Ta metoda została tutaj omówiona i powinna działać również w Internet Explorerze 8 i 9. Wyjaśnię to krótko:
W przepływie wbudowanym element poziomu wbudowanego może być wyrównany pionowo do środka poprzez
vertical-align: middle
deklarację. Specyfikacja z W3C :W przypadkach, gdy
.vertical-center
element nadrzędny - w tym przypadku element - ma wyraźnyheight
przypadek, gdybyśmy mogli mieć element podrzędny mający dokładnie to samoheight
co element nadrzędny, bylibyśmy w stanie przenieść linię bazową elementu nadrzędnego do punktu środkowego pełnego -wysokie dziecko i nieoczekiwanie sprawiają, że nasze upragnione dziecko w przepływie.container
- wyrównane do środka pionowo.Zebranie się razem
Mając na uwadze powyższe, możemy utworzyć element pełnej wysokości wewnątrz
.vertical-center
przez::before
lub::after
elementy pseudo a także zmienić domyślnydisplay
typ niego i pozostałe dziecka,.container
doinline-block
.Następnie użyj,
vertical-align: middle;
aby wyrównać elementy wbudowane w pionie.Proszę bardzo:
DEMO ROBOCZE .
Ponadto, aby uniknąć nieoczekiwanych problemów w dodatkowych małych ekranach, można zresetować wysokość pseudo-elementu,
auto
lub0
lub zmienić jegodisplay
typ nanone
razie potrzeby tak:ZAKTUALIZOWANA DEMO
I jeszcze jedno:
Jeśli wokół kontenera znajdują się
footer
/header
sekcje, lepiej jest odpowiednio ustawić te elementy (relative
,absolute
? Do ciebie.) I dodać wyższąz-index
wartość (dla pewności), aby były zawsze na szczycie innych.źródło
display: flex
do.container
, powoduje, że dziecko.row
się przewraca. Wygląda na to, że sposób Flexbox wymagałby od nas rezygnacji z niektórych głównych funkcji bootstrap?Aktualizacja 2019
Bootstrap 4 zawiera Flexbox, więc metoda centrowania w pionie jest znacznie łatwiejsza i nie wymaga dodatkowego CSS .
Wystarczy użyć klas
d-flex
ialign-items-center
narzędzi użytkowych ..http://www.codeply.com/go/ui6ABmMTLv
Ważne: Centrowanie w pionie odnosi się do wysokości . Kontener nadrzędny przedmiotów, które próbujesz wyśrodkować, musi mieć określoną wysokość . Jeśli chcesz wysokość strony użyj
vh-100
lubmin-vh-100
nadrzędny! Na przykład:Zobacz także: Vertical Align Center w Bootstrap 4
źródło
dodaj Bootstrap.css, a następnie dodaj to do swojego css
źródło
W Bootstrap 4 :
aby wyśrodkować dziecko w poziomie , użyj klasy bootstrap-4:
aby wyśrodkować dziecko w pionie , użyj klasy bootstrap-4:
ale pamiętajcie, nie zapominajcie o użyciu klasy d-flex z tymi klasami. Jest to klasa narzędziowa bootstrap-4
Uwaga: pamiętaj, aby dodać narzędzia bootstrap-4, jeśli ten kod nie działa
Wiem, że nie jest to bezpośrednia odpowiedź na to pytanie, ale może komuś pomóc
źródło
Moja preferowana technika:
Próbny
Zobacz także to skrzypce !
źródło
Testowane w IE, Firefox i Chrome.
Znaleziono na https://css-tricks.com/centering-css-complete-guide/
źródło
dla bootstrap4 pionowy środek kilku przedmiotów
d-flex dla reguł flex
kolumna elastyczna dla kierunku pionowego na przedmiotach
justify-content-center do centrowania
style = 'height: 300px;' musi mieć wartości zadane, dla których środek ma być obliczony lub użyć klasy h-100
następnie dla poziomego środka div d-flex justify-content-center i trochę kontenera
więc mamy hierarhy z 3 tagów: div-column -> div-row -> div-container
źródło
Jeśli używasz Bootstrap 4, wystarczy dodać 2 div:
Klasy: d-table, d-table-cell, w-100, h-100 i align-middle wykonają zadanie
źródło
Podaj klasę kontenera
Podaj div, który jest w pojemniku:
Cała zawartość tego div pojawi się na środku strony.
źródło
Oto sposób, którego używam do wyrównywania zawartości w pionie - góra / środek / dół z bootstrap 3 rzędami. Bootstrap 3 kolumny o tej samej wysokości i wyrównane w pionie.
Tutaj jest demo JSFiddle .
źródło