wyrównanie w pionie za pomocą Bootstrap 3

889

Używam Twitter Bootstrap 3 i mam problemy, gdy chcę wyrównać dwa w pionie div, na przykład - link JSFiddle :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-xs-5">
    <div style="height:5em;border:1px solid #000">Big</div>
  </div>
  <div class="col-xs-5">
    <div style="height:3em;border:1px solid #F00">Small</div>
  </div>
</div>

System siatki w Bootstrap używa , więc float: leftnie display:inline-block, więc właściwość vertical-alignnie działa. Próbowałem margin-topgo naprawić, ale myślę, że nie jest to dobre rozwiązanie dla responsywnego projektu.

Corinem
źródło
1
nie nie, chcę wyrównać w pionie 2 div, bez tekstu w środku, coś takiego jak ten jsfiddle.net/corinem/Aj9H9, ale w tym przykładzie nie używam bootstrap
corinem
3
możliwy duplikat Jak używać wyrównania pionowego w bootstrapie
Chris Moschini
6
WAŻNE: Obie kolumny potrzebują klasy „vcenter”. W przeciwnym razie to nie zadziała. Spędziłem godzinę na godzinę, właśnie to rozgryzając.
Cymro
żadna z odpowiedzi nie działa idealnie na Chrome IE8 i mobile dla mnie z wierszem zawierającym 5 col- (i 3
col-
W Bootstrap 4 pionowe wyrównanie do środka jest bardzo różne: stackoverflow.com/a/41464397/171456
Zim

Odpowiedzi:

938

Ta odpowiedź przedstawia włamanie, ale zdecydowanie polecam korzystanie z Flexboksa (jak podano w odpowiedzi @Haschem ), ponieważ jest teraz obsługiwany wszędzie.

Link do wersji demonstracyjnej:
- Bootstrap 3
- Bootstrap 4 alfa 6

Nadal możesz użyć niestandardowej klasy, gdy jej potrzebujesz:

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}
<div class="row">
    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Bootply

Używanie inline-blockdodaje dodatkową przestrzeń między blokami, jeśli pozwalasz na spację w swoim kodzie (jak ...</div> </div>...). Ta dodatkowa przestrzeń łamie naszą siatkę, jeśli rozmiary kolumn sumują się do 12:

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div>
    <div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Tutaj mamy dodatkowe spacje między <div class="[...] col-lg-2">i <div class="[...] col-lg-10">(powrót karetki i 2 tabulatory / 8 spacji). A więc...

Wpisz opis zdjęcia tutaj

Wykopmy tę dodatkową przestrzeń !!

<div class="row">
    <div class="col-xs-6 col-md-4 col-lg-2 vcenter">
        <div style="height:10em;border:1px solid #000">Big</div>
    </div><!--
    --><div class="col-xs-6 col-md-8 col-lg-10 vcenter">
        <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
</div>

Wpisz opis zdjęcia tutaj

Zauważ pozornie bezużyteczne komentarze <!-- ... -->? Są ważne - bez nich spacja między <div>elementami zajmie miejsce w układzie, niszcząc system siatki.

Uwaga: Bootply został zaktualizowany

zessx
źródło
18
Dzieje się tak, jeśli określisz siatki kolumn sumujące się do 12 (np. Używając col-lg-2i col-lg-10). Co ciekawe, jeśli dodasz następujący kod JS (przy założeniu jQuery), uda się to naprawić:$('.row').html($('.vcenter'));
Jake Z
8
@pasemes Jest to spowodowane (dobrze znaną) inline-block dodatkową przestrzenią . W mojej edycji podaję rozwiązanie.
zessx
92
Część z pustymi komentarzami przypomina głęboką, mroczną, złą magię. I to jest. Ale ktoś gdzieś zdecydował, że to powinno działać, więc to działa.
cfstras
5
Zaskoczony, nikt jeszcze o tym nie wspominał, ale zamiast komentowania możesz ustawić „font-size: 0;” na rodzicach div inline-block, aby usunąć „tajemniczą przestrzeń”
Poff
4
Nie trzeba używać komentarza HTML <! - -> ani żadnego kodu javascript, aby rozwiązać problem dodatkowej przestrzeni, istnieje prosta i skuteczna sztuczka CSS: ujemne marginesy. Wystarczy dodać margines z prawej: -4px; do klasy .vcenter. Przetestowany i działający ze wszystkimi przeglądarkami (oprócz starych IE6 i IE7 ... ale kogo to obchodzi z prehistorią;))
Frank
897

Elastyczny układ pudełka

Wraz z pojawieniem się CSS Flexible Box wiele koszmarów 1 projektantów stron internetowych zostało rozwiązanych. Jeden z najbardziej hackujących, wyrównanie pionowe. Teraz jest to możliwe nawet na nieznanych wysokościach .

„Dwie dekady włamań układowych dobiegają końca. Może nie jutro, ale wkrótce i do końca życia”.

- CSS Legendary Eric Meyer na W3Conf 2013

Flexible Box (lub w skrócie Flexbox) to nowy system układu zaprojektowany specjalnie do celów układu. Te stany specyfikacja :

Układ Flex jest powierzchownie podobny do układu bloków. Brakuje w nim wielu bardziej złożonych właściwości tekstowych lub ukierunkowanych na dokumenty, których można użyć w układzie bloków, takich jak zmiennoprzecinkowe i kolumny. W zamian zyskuje proste i wydajne narzędzia do rozmieszczania przestrzeni i wyrównywania zawartości w sposób, którego często potrzebują aplikacje internetowe i złożone strony internetowe.

Jak może pomóc w tym przypadku? Więc, zobaczmy.


Pionowe kolumny wyrównane

Korzystając z Bootstrap na Twitterze mamy .rowtrochę .col-*s. Wszystko, co musimy zrobić, to wyświetlić żądane .row2 jako elastyczne pudełko kontenera , a następnie wyrównać wszystkie jego elementy elastyczne (kolumny) pionowo według align-itemswłaściwości.

PRZYKŁAD TUTAJ (Przeczytaj uważnie komentarze)

<div class="container">
    <div class="row vertical-align"> <!--
                    ^--  Additional class -->
        <div class="col-xs-6"> ... </div>
        <div class="col-xs-6"> ... </div>
    </div>
</div>
.vertical-align {
    display: flex;
    align-items: center;
}

Wyjście

Wyrównane w pionie kolumny w Bootstrap na Twitterze

Kolorowy obszar wyświetla pole wypełnienia kolumn.

Wyjaśnianie w sprawie align-items: center

8.3 Wyrównanie osi: align-itemswłaściwość

Elementy elastyczne można wyrównywać w osi poprzecznej bieżącej linii pojemnika elastycznego, podobnie jak justify-contentw kierunku prostopadłym, ale w tym samym kierunku. align-itemsustawia domyślne wyrównanie dla wszystkich elementów pojemnika Flex, w tym anonimowych elementów Flex .

align-items: center; Według wartości środkowej pole marginesu elementu elastycznego jest wyśrodkowane na osi poprzecznej w linii.


Big Alert

Ważna uwaga # 1: Twitter Bootstrap nie określa widthkolumn w bardzo małych urządzeniach, chyba że podasz jedną z .col-xs-#klas kolumnom.

Dlatego w tym konkretnym pokazie użyłem .col-xs-*klas, aby kolumny były poprawnie wyświetlane w trybie mobilnym, ponieważ widthwyraźnie określa kolumnę.

Ale alternatywnie możesz wyłączyć układ Flexbox, po prostu zmieniając display: flex;na display: block;określone rozmiary ekranu. Na przykład:

/* Extra small devices (767px and down) */
@media (max-width: 767px) {
    .row.vertical-align {
        display: block; /* Turn off the flexible box layout */
    }
}

Lub możesz określić .vertical-align tylko na określonych rozmiarach ekranu, takich jak:

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .row.vertical-align {
        display: flex;
        align-items: center;
    }
}

W tym przypadku pójdę z @KevinNelson „s podejście .

Ważna uwaga # 2: Prefiksy dostawcy pominięto ze względu na zwięzłość. Składnia Flexbox została zmieniona w tym czasie. Nowa pisemna składnia nie będzie działać na starszych wersjach przeglądarek internetowych (ale nie tak starych jak Internet Explorer 9! Flexbox jest obsługiwany w Internet Explorerze 10 i nowszych).

Oznacza to, że display: -webkit-boxw trybie produkcyjnym należy również używać właściwości z prefiksem dostawcy, takich jak itd.

Jeśli klikniesz „Przełącz widok kompilowany” w Demo , zobaczysz prefiksowaną wersję deklaracji CSS (dzięki Autoprefixer ).


Kolumny o pełnej wysokości z wyrównaną w pionie treścią

Jak widać w poprzedniej wersji demonstracyjnej , kolumny (elementy Flex) nie są już tak wysokie jak ich kontener (pole Flex Container, tzn. .rowElement).

Wynika to z używania centerwartości align-itemswłaściwości. Wartość domyślna jest stretchtaka, że ​​elementy mogą wypełnić całą wysokość elementu nadrzędnego.

Aby to naprawić, możesz również dodać display: flex;do kolumn:

PRZYKŁAD TUTAJ (ponownie, pamiętaj o komentarzach)

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;     /* Align the flex-items vertically */
  justify-content: center; /* Optional, to align inner flex-items
                              horizontally within the column  */
}

Wyjście

Kolumny o pełnej wysokości z wyrównaną do pionu zawartością w Bootstrap na Twitterze

Kolorowy obszar wyświetla pole wypełnienia kolumn.

Na koniec zauważ, że prezentacje i fragmenty kodu mają na celu dać ci inny pomysł i zapewnić nowoczesne podejście do osiągnięcia celu. Jeśli zamierzasz stosować to podejście w witrynach i aplikacjach z prawdziwego świata, pamiętaj o sekcji „ Big Alert ”.


Przydałoby się to do dalszej lektury, w tym do obsługi przeglądarki, te zasoby:


1. Wyrównaj obraz w pionie w pionie z responsywną wysokością. 2. Lepiej jest użyć dodatkowej klasy, aby nie zmieniać domyślnych ustawień Bootstrap na Twitterze .row.

Hashem Qolami
źródło
9
Po krótkich badaniach okazało się, że HTML5Please.com mówi, że istnieje wystarczające wsparcie, aby z niego korzystać. To jest niesamowite! html5please.com/#flexbox
Alec Moore
6
To jest rzeczywiście najlepsze rozwiązanie i powinno mieć więcej wsparcia. I oczywiście my, programiści, musimy go używać w jak największym stopniu, aby go propagować.
Mateus Neves,
12
Próbowałem tego i nie działałem dla mnie w oczekiwany sposób, dopóki nie zredagowałem twoich skrzypiec i nie zorientowałem się, że jest to całkowicie bezużyteczne i strata czasu. Wykonanie tego całkowicie pomija sens responsywnego projektowania, ponieważ kolumny nie układają się jeden na drugim, gdy nie mieszczą się na ekranie, co powoduje, że potrzeba bootstrapu jest całkowicie bezużyteczna, a witryna przestaje odpowiadać. Aby zobaczyć, co mam na myśli, zmień dowolną kolumnę col-xs- * na col-xs-12 w odpowiednich przykładach, zmniejsz ekran przeglądarki (tak jak urządzenie mobilne) i zobacz wyniki: koniec reakcji.
Pere
8
@HashemQolami, chociaż używasz nazwanych klas col-*, twoje skrzypce / codepens nie korzystają z bootstrap, więc wprowadzają w błąd. Twoje przykłady nie działają z bootstrap; jego system grid nie jest oparty flex, dlatego nie są kompatybilne. Wystarczy wypróbować dowolny z przykładów na stronie zasilanej bootstrapem, a zdasz sobie sprawę, że nie działają.
Pere
5
@Hashem Qolami nadal nie może znaleźć żadnego zastosowania dla twoich sugestii. Jedną z podstawowych, dyskretnych cech Bootstrap jest to, że kolumny układają się jedna na drugiej, gdy nie pasują poziomo. Tak się już nie dzieje z twoim rozwiązaniem. System siatki działa, nawet jeśli załadujesz tylko style, jak widać w tym skrzypce . Brak js; tylko css. Zmień rozmiar obszaru renderowania, a on zareaguje. Tak się nie dzieje w żadnym z twoich przykładów. Utracono podejście „najpierw mobilne”, przez co Bootstrap nie jest potrzebny. Ta odpowiedź jest nieprawidłowa, myląca lub niepełna.
Pere
48

Poniższy kod działał dla mnie:

.vertical-align {
    display: flex;
    align-items: center;
}
Thanga
źródło
4
Najprostsze rozwiązanie IMHO
saiyancoder
3
Czy ktoś ma rozwiązanie, które działa z jedną kolumną? Mam wiersz, a potem w środku tylko col-md-6. To rozwiązanie i pozostałe Flexbox działają tylko wtedy, gdy są 2 kolumny
Ka Mok
36

Aktualizacja 2020

Wiem, że pierwotne pytanie dotyczyło Bootstrap 3, ale teraz, gdy Bootstrap 4 został wydany, oto kilka zaktualizowanych wskazówek dotyczących pionowego środka.

Ważny! Środek pionowy odnosi się do wysokości rodzica

Jeśli element nadrzędny elementu, który próbujesz wyśrodkować, nie ma określonej wysokości , żadne z rozwiązań centrowania pionowego nie będzie działać!

Bootstrap 4

Teraz, gdy Bootstrap 4 jest domyślnie Flexbox, istnieje wiele różnych podejść do wyrównania w pionie za pomocą: auto-marginesów , narzędzi flexbox lub narzędzi do wyświetlania wraz z narzędziami do wyrównywania w pionie . Na początku „narzędzia do wyrównywania w pionie” wydają się oczywiste, ale działają one tylko z elementami wyświetlania w wierszu i tabeli. Oto niektóre opcje centrowania pionowego Bootstrap 4.


1 - Środek pionowy przy użyciu automatycznych marginesów:

Innym sposobem na wyśrodkowanie w pionie jest użycie my-auto. Spowoduje to wyśrodkowanie elementu w jego kontenerze. Na przykład ustawia h-100wiersz na pełną wysokość i my-autowyśrodkuje col-sm-12kolumnę pionowo .

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Bootstrap 4 - Pionowe centrum z wykorzystaniem automatycznego marginesu Demo

my-auto reprezentuje marginesy na pionowej osi y i jest równoważny:

margin-top: auto;
margin-bottom: auto;

2 - Centrum pionowe z Flexbox:

Pionowe środkowe kolumny siatki

Ponieważ Bootstrap 4 .rowjest teraz display:flex, możesz po prostu użyć align-self-centerdowolnej kolumny, aby wyśrodkować ją pionowo ...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

lub użyj align-items-centercałości, .rowaby wyśrodkować w pionie wszystkie col-*w rzędzie ...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Bootstrap 4 - Pionowe kolumny o różnych wysokościach w środku Demo


3 - Środek pionowy za pomocą wyświetlaczy:

Bootstrap 4 ma narzędzi z ekranu , który może być używany do display:table, display:table-cell, display:inline, etc .. Mogą one być stosowane z pionowych utils wyrównanie , aby wyrównać inline inline bloku lub elementy komórka tabeli.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Bootstrap 4 - Środek pionowy za pomocą narzędzi wyświetlających Demo

Zobacz także: Vertical Align Center w Bootstrap 4


Bootstrap 3

Metoda Flexbox na kontenerze przedmiotu (ów), aby wyśrodkować:

.display-flex-center {
    display: flex;
    align-items: center;
}

Przekształć metodę translateY:

.transform-center-parent {
    position: relative;
    transform-style: preserve-3d;
}

.transform-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Wyświetl metodę wbudowaną:

.display-inline-block {
    display: inline;
}
.display-inline-block > div {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

Demonstracja metod centrowania Bootstrap 3

Zim
źródło
1
Oto dokumentacja Bootstrap dla mx-auto(centrowanie poziome), dlatego sensowne jest centrowanie w my-autopionie (oś y).
xinthose
26

Wypróbuj to w CSS div:

display: table-cell;
vertical-align: middle;
użytkownik2249160
źródło
4
element nadrzędny musi być wyświetlany: tabela
Az.Youness
21

Pomyślałem, że podzielę się moim „rozwiązaniem” na wypadek, gdyby pomógł każdemu, kto nie jest zaznajomiony z samym zapytaniem @media.

Dzięki odpowiedzi @ HashemQolami zbudowałem kilka zapytań o media, które działałyby mobilnie jak klasy col- *, tak że mogłem układać col- * dla urządzeń mobilnych, ale wyświetlać je pionowo w środku dla większych ekranów, np.

<div class='row row-sm-flex-center'>
    <div class='col-xs-12 col-sm-6'></div>
    <div class='col-xs-12 col-sm-6'></div>
</div>

.

.row-xs-flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .row-sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .row-md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .row-lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Bardziej skomplikowane układy, które wymagają innej liczby kolumn na rozdzielczość ekranu (np. 2 rzędy dla -xs, 3 dla -sm i 4 dla -md itp.) Wymagałyby bardziej zaawansowanego finaglingu, ale dla prostej strony z -xs ułożone i -sm i większe w rzędach, to działa dobrze.

Kevin Nelson
źródło
W moim przypadku musiałem dodać clear: both;do klas wewnątrz zapytań o media, aby to zadziałało.
motaa
1
@motaa, przepraszam za zamieszanie ... W modzie BS3, jak widać w moim przykładzie HTML, używam tego jako .rowmodyfikatora ... więc powinno to wyglądać class="row row-sm-flex-center". .rowDefinicja BS3 obsługujeclear:both;
Kevin Nelson
Powinienem był dokładniej przeanalizować kod HTML. :) Używam również modyfikatora .row, ale w moim przypadku (wordpress) został on zmieniony w motywie nadrzędnym, co ostatecznie doprowadziło mnie do dodania go clear: both;ponownie.
motaa
21

Po zaakceptowaniu odpowiedzi, jeśli nie chcesz dostosowywać znaczników, w celu rozdzielenia problemów lub po prostu dlatego, że korzystasz z CMS, następujące rozwiązanie działa dobrze:

.valign {
  font-size: 0;
}

.valign > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row valign">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid #000">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid #F00">Small</div>
   </div>
 </div>

Ograniczeniem jest tutaj to, że nie można dziedziczyć rozmiaru czcionki z elementu nadrzędnego, ponieważ wiersz ustawia rozmiar czcionki na 0 w celu usunięcia białych znaków.

Manuszep
źródło
20

Wolę tę metodę zgodnie z Davidem Walsh Vertical Center CSS :

.children{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

To transformnie jest konieczne; po prostu znajduje centrum nieco dokładniej. W rezultacie Internet Explorer 8 może być nieco mniej wyśrodkowany, ale nadal nie jest zły - czy mogę go użyć - przekształca 2d .

użytkownik1477388
źródło
17

To jest moje rozwiązanie. Po prostu dodaj tę klasę do treści CSS.

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}

Wtedy twój HTML wyglądałby tak:

<div class="col-xs-12 align-middle">
  <div class="col-xs-6" style="background-color:blue;">
    <h3>Item</h3>
    <h3>Item</h3>
  </div>
  <div class="col-xs-6" style="background-color:red;">
    <h3>Item</h3>
  </div>
</div>

.align-middle {
  display: flex;
  justify-content: center;
  align-items: center;
}
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
    <title>Title</title>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-xs-12 align-middle">
          <div class="col-xs-6" style="background-color:blue;">
            <h3>Item</h3>
            <h3>Item</h3>
          </div>
          <div class="col-xs-6" style="background-color:red;">
            <h3>Item</h3>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  </body>
</html>

Edvard Åkerberg
źródło
1
To łamie responsywne klasy, takie jak col-md-6
Lucas Bustamante
15

Właśnie to zrobiłem i robi to, co chcę.

.align-middle {
  margin-top: 25%;
  margin-bottom: 25%;
}

A teraz wygląda moja strona

<div class='container-fluid align-middle'>
    content

 +--------------------------------+
 |                                |
 |  +--------------------------+  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  +--------------------------+  |
 |                                |
 +--------------------------------+
Ryan Alexander
źródło
Problem z tym podejściem polega na tym, że nie działa ono, gdy DIV ma określoną wysokość: jsfiddle.net/4bpxen25/1 Polecam: stackoverflow.com/a/28519318/1477388
user1477388
10

Naprawdę uważam, że następujący kod działa w przeglądarce Chrome i nie w innych przeglądarkach niż aktualnie wybrana odpowiedź:

.v-center {
    display:table!important; height:125px;
}

.v-center div[class*='col-'] {
   display: table-cell!important;
   vertical-align:middle;
   float:none;
}
.v-center img {
   max-height:125px;
}

Bootply Link

Konieczne może być dostosowanie wysokości (szczególnie włączenie .v-center) i usunięcie / zmiana div div[class*='col-']dla własnych potrzeb.

babeczki
źródło
8

Natrafiłem na ten sam problem. W moim przypadku nie znałem wysokości zewnętrznego pojemnika, ale tak to naprawiłem:

Najpierw ustaw wysokość dla siebie htmli bodyelementów, aby były w 100%. To jest ważne! Bez tego, htmla bodyelementy po prostu odziedziczyć wysokość swoich dzieci.

html, body {
   height: 100%;
}

Potem miałem klasę kontenerów zewnętrznych z:

.container {
  display: table;
  width: 100%;
  height: 100%; /* For at least Firefox */
  min-height: 100%;
}

I wreszcie pojemnik wewnętrzny z klasą:

.inner-container {
  display: table-cell;
  vertical-align: middle;
}

HTML jest tak prosty jak:

<body>
   <div class="container">
     <div class="inner-container">
        <p>Vertically Aligned</p>
     </div>
   </div>
</body>

To wszystko, czego potrzebujesz, aby wyrównać zawartość w pionie. Sprawdź to w skrzypcach:

Jsfiddle

Kingsley Ijomah
źródło
8

Tabela i komórki nie są potrzebne. Można to łatwo osiągnąć za pomocą transformacji.

Przykład: http://codepen.io/arvind/pen/QNbwyM

Kod:

.child {
  height: 10em;
  border: 1px solid green;
  position: relative;
}
.child-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row parent">
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:4em;border:1px solid #000">Big</div>
    </div>
  </div>
  <div class="col-xs-6 col-lg-6 child">
    <div class="child-content">
      <div style="height:3em;border:1px solid #F00">Small</div>
    </div>
  </div>
</div>

Arvind Bhardwaj
źródło
7

Jeśli korzystasz z Less wersji Bootstrap i sam kompilujesz się w CSS, możesz użyć niektórych klas narzędzi do użycia z klasami Bootstrap.

Uważam, że działają one fantastycznie dobrze tam, gdzie chcę zachować szybkość reakcji i konfigurowalność systemu siatki Bootstrap (np. Przy użyciu -mdlub-sm ), ale chcę, aby wszystkie kolumny w danym rzędzie miały tę samą wysokość pionową (dzięki czemu mogę następnie wyrównaj ich zawartość w pionie, aby wszystkie kolumny w wierszu miały wspólny środek).

CSS / Mniej:

.display-table {
    display: table;
    width: 100%;
}
.col-md-table-cell {
    @media (min-width: @screen-md-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.col-sm-table-cell {
    @media (min-width: @screen-sm-min) {
        display: table-cell;
        vertical-align: top;
        float: none;
    }
}
.vertical-align-middle {
    vertical-align: middle;
}

HTML:

<div class="row display-table">
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
    <div class="col-sm-5 col-sm-table-cell vertical-align-middle">
        ...
    </div>
</div>
Gerbus
źródło
6

Trochę rozwinąłem odpowiedź Zessx , aby ułatwić jej użycie podczas mieszania różnych rozmiarów kolumn na różnych rozmiarach ekranu.

Jeśli używasz Sassa , możesz dodać to do pliku scss:

@mixin v-col($prefix, $min-width) {
    @media (min-width: $min-width) {
        .col-#{$prefix}-v {
            display: inline-block;
            vertical-align: middle;
            float: none;
        }
    }
}

@include v-col(lg, $screen-lg);
@include v-col(md, $screen-md);
@include v-col(sm, $screen-sm);
@include v-col(xs, $screen-xs);

Który generuje następujący CSS (którego możesz użyć bezpośrednio w arkuszach stylów, jeśli nie używasz Sass):

@media (min-width: 1200px) {
    .col-lg-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 992px) {
    .col-md-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 768px) {
    .col-sm-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

@media (min-width: 480px) {
    .col-xs-v {
        display: inline-block;
        vertical-align: middle;
        float: none;
    }
}

Teraz możesz go używać w swoich elastycznych kolumnach w następujący sposób:

<div class="container">
    <div class="row">
        <div class="col-sm-7 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div><div class="col-sm-5 col-sm-v col-xs-12">
            <p>
                This content is vertically aligned on tablets and larger. On mobile it will expand to screen width.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-7 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div><div class="col-md-5 col-md-v col-sm-12">
            <p>
                This content is vertically aligned on desktops and larger. On tablets and smaller it will expand to screen width.
            </p>
        </div>
    </div>
</div>
sb.olofsson
źródło
To jest naprawdę miłe!
Pietro Coelho
Głosowano tylko ze względu na krótką składnię i użycie zmiennych LESS.
Eduard Luca
5

Zachowania Flex są natywnie obsługiwane od Bootstrap 4. Dodać d-flex align-items-centerwrow div. Nie musisz już modyfikować treści CSS.

Prosty przykład: http://jsfiddle.net/vgks6L74/

<!-- language: html -->
<div class="row d-flex align-items-center">
  <div class="col-5 border border-dark" style="height:10em">  Big </div>
  <div class="col-2 border border-danger" style="height:3em"> Small </div>
</div>

Na przykład: http://jsfiddle.net/7zwtL702/

<!-- language: html -->
<div class="row d-flex align-items-center">
    <div class="col-5">
        <div class="border border-dark" style="height:10em">Big</div>
    </div>
    <div class="col-2">
        <div class="border border-danger" style="height:3em">Small</div>
   </div>
</div>

Źródło: Flex · Bootstrap

Bot élecul
źródło
4

OK, przypadkowo wymieszałem kilka rozwiązań i wreszcie działa teraz dla mojego układu, w którym próbowałem stworzyć tabelę 3x3 z kolumnami Bootstrap w najmniejszej rozdzielczości.

/* Required styles */

#grid a {
  display: table;
}

#grid a div {
  display: table-cell;
  vertical-align: middle;
  float: none;
}


/* Additional styles for demo: */

body {
  padding: 20px;
}

a {
  height: 40px;
  border: 1px solid #444;
}

a > div {
  width: 100%;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div id="grid" class="clearfix row">
  <a class="col-xs-4 align-center" href="#">
    <div>1</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>2</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>3</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>4</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>5</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>6</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>7</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>8</div>
  </a>
  <a class="col-xs-4 align-center" href="#">
    <div>9</div>
  </a>
</div>

godblessstrawberry
źródło
2

    div{
        border: 1px solid;
    }
    span{
        display: flex;
        align-items: center;
    }
    .col-5{
        width: 100px;
        height: 50px;
        float: left;
        background: red;
    }
    .col-7{
        width: 200px;
        height: 24px;

        float: left;
        background: green;
    }
    <span>
        <div class="col-5">
        </div>
        <div class="col-7"></div>
    </span>

Nambi N Rajan
źródło
1

Spróbuj tego,

.exe {
  font-size: 0;
}

.exe > [class*="col"] {
  display: inline-block;
  float: none;
  font-size: 14px;
  font-size: 1rem;
  vertical-align: middle;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row  exe">
   <div class="col-xs-5">
      <div style="height:5em;border:1px solid grey">Big</div>
   </div>
   <div class="col-xs-5">
       <div style="height:3em;border:1px solid red">Small</div>
   </div>
 </div>

rdzeń 114
źródło
1

Można to zrobić na kilka sposobów:

  1. Posługiwać się 

    display: table-cell;
    vertical-align: middle;

    oraz CSS kontenera do

    display: table;
  2. Użyj wypełnienia wraz z ekranem multimediów, aby zmienić wypełnienie w stosunku do rozmiaru ekranu. Google @media screen, aby dowiedzieć się więcej.

  3. Użyj względnego wypełnienia

    Tj. Określ wypełnienie w%

Amaan Iqbal
źródło
0

Z Bootstrap 4 (który jest obecnie w wersji alfa) możesz używać tej .align-items-centerklasy. Możesz więc zachować responsywny charakter Bootstrap. Działa od razu dobrze dla mnie. Zobacz dokumentację Bootstrap 4 .

DiCaprio
źródło
Działa to tylko w przypadku niektórych elementów, gdy wyświetlany jest element zawierający: flex.
Zim
0

HTML

<div class="row">
    <div class="col-xs-2 pull-bottom"
         style="height:100px;background:blue">
    </div>
    <div class="col-xs-8 pull-bottom"
         style="height:50px;background:yellow">
    </div>
</div>

CSS

.pull-bottom {
    display: inline-block;
    vertical-align: bottom;
    float: none;
}
Pacific P. Regmi
źródło
-4

Natrafiłem na tę samą sytuację, w której chciałem wyrównać kilka elementów div pionowo w rzędzie i stwierdziłem, że klasy Bootstrap col-xx-xx stosują styl do div jako float: left.

Musiałem zastosować styl do elementów div, takich jak style = "Float: none", a wszystkie moje elementy div zaczęły być wyrównane w pionie. Oto działający przykład:

<div class="col-lg-4" style="float:none;">

JsFiddle Link

Na wypadek, gdyby ktoś chciał przeczytać więcej na temat właściwości float:

W3Schools - Float

ATHER
źródło
To nie działa dla mnie. Testowałem w Firefox i Chrome. Wszystkie panele są ułożone pionowo.
Alf
float: żaden nie sprawi, że będą ułożone pionowo, tak powinno działać.
ATHER
1
To odpowiednia odpowiedź na inne pytanie. ;)
Alf