Elastyczny układ pudełek

"dwie dekady hackowania układów dobiega końca. Może nie jutro, ale wkrótce i do końca życia."

- CSS Legendary Eric Meyer at w3conf 2013

Flexbox (lub w skrócie Flexbox), to nowy system layoutu, który został specjalnie zaprojektowany do celów layoutu. Specyfikacja stwierdza :

Układ Flex jest powierzchownie podobny do układu blokowego. Brakuje wielu z bardziej złożone właściwości tekstu lub dokumentu, które można wykorzystać w układzie bloków, takich jak pływaki i kolumny. W zamian zyskuje proste i potężne narzędzia do dystrybucji przestrzeni i dostosowywania treści w sposób że webappy i złożone strony internetowe często potrzebują.

Jak to może pomóc w tym przypadku? Zobaczmy.

Kolumny wyrównane Pionowo

Za pomocą Twittera Bootstrap mamy .row s posiadające niektóre .col-* s. wszystko, co musimy zrobić, to wyświetlić żądaną .row² jako flex container box, a następnie wyrównaj wszystkie jego Flex element s (kolumny) pionowo przez align-items własność.

Przykład tutaj (proszę przeczytać komentarze z troską)

<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

kolorowy obszar wyświetla pole wypełnienia kolumn.

Wyjaśnienie na align-items: center

8.3 wyrównanie poprzeczne: właściwość align-items

Elementy Flex mogą być wyrównane w osi poprzecznej bieżącej linii kontenera flex, podobnie jak justify-content ale w kierunku prostopadłym. align-items ustawia wartość domyślną wyrównanie dla wszystkich elementów kontenera flex, w tym anonimowych elementów flex .

align-items: center; Wartość marginesu elementu flex jest wyśrodkowana w osi poprzecznej wewnątrz linii.

Wielki Alarm

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

Dlatego w tym konkretnym demo, ja używały klas .col-xs-* w celu prawidłowego wyświetlania kolumn w trybie mobilnym, ponieważ określa ona jawnie width Kolumny.

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

Lub można określić .vertical-align tylko na konkretnych rozmiarach ekranu jak tak:

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

W takim razie wybrałbym @ KevinNelson 's podejście .

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

Oznacza to, że powinieneś również używać właściwości poprzedzonych przez dostawcę, takich jak display: -webkit-box i tak dalej w trybie produkcyjnym.

If you click on " Toggle Compiled Zobacz " W Demo zobaczysz prefiksową wersję deklaracji CSS(dzięki Autoprefixer ).

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

Jak widać w poprzednim demo , kolumny (elementy flex) nie są już tak wysokie jak ich kontener (pudełko flex container. tj. element .row).

Jest to spowodowane użyciem center wartości dla align-items właściwości. Domyślną wartością jest stretch, aby elementy mogły wypełnij całą wysokość elementu nadrzędnego.

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

Przykład tutaj (uwaga na komentarze)

.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

kolorowy obszar wyświetla pole wypełnienia kolumn.

Na koniec zauważ, że dema i fragmenty kodu mają dać ci inny pomysł, aby zapewnić nowoczesne podejście do osiągnij cel. Proszę zwrócić uwagę na sekcję " Big Alert ", jeśli zamierzasz używać tego podejścia w rzeczywistych witrynach internetowych lub aplikacjach.

• Mozilla Developer Network-elastyczne pudełka
• Przewodnik po Flexbox-sztuczki CSS
• HTML5Rocks-Flexbox quick
• SmashingMagazine - Elementy centrujące z Flexbox
• Philip Walton-Rozwiązane Przez Flexbox
• Można Użyć: Elastyczny Moduł Układu Pudełek

^{1. pionowo wyrównaj obraz wewnątrz div z responsywną wysokością2. Lepiej użyć dodatkowej klasy, aby nie zmieniać domyślnej .row Twitter Bootstrap.}

Poniższy kod zadziałał dla mnie:

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

Spróbuj tego w CSS div:

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

Po zaakceptowanej odpowiedzi, jeśli nie chcesz dostosować znaczników, dla oddzielenia obaw lub po prostu dlatego, że używasz 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>

Ograniczenie polega na tym, że nie można dziedziczyć rozmiaru czcionki z elementu nadrzędnego, ponieważ wiersz ustawia rozmiar czcionki na 0 w celu usunięcia spacji.

Pomyślałem, że podzielę się moim "rozwiązaniem" na wypadek, gdyby pomogło to komukolwiek innemu, kto nie jest zaznajomiony z samymi zapytaniami @media.

Dzięki odpowiedzi @HashemQolami, zbudowałem kilka zapytań o media, które działałyby mobilnie, jak Klasy col -*, dzięki czemu mogłem układać col - * dla urządzeń mobilnych, ale wyświetlać je pionowo w centrum 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ą różnej liczby kolumn na rozdzielczość ekranu (np. 2 Wiersze dla-xs, 3 dla-sm i 4 dla-md, itd.) wymagałoby bardziej zaawansowanego finaglowania, ale dla prostej strony z-xs ułożonymi w stos i-sm i większymi w rzędach, działa to dobrze.

Preferuję tę metodę według David Walsh Vertical center CSS :

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

transform nie jest istotne; po prostu znajduje centrum nieco dokładniej. Internet Explorer 8 może być nieco mniej wyśrodkowany, ale nadal nie jest zły - Czy Mogę używać-Transforms 2d.

Aktualizacja 2018

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

Ważne! środek pionowy jest względem wysokości rodzica

Jeśli rodzic elementu, który próbujesz wyśrodkować, nie ma zdefiniowanego wysokość, żadne z rozwiązań centrowania pionowego nie będzie praca!

Bootstrap 4

Teraz, gdy BS4 jest flexbox domyślnie istnieje wiele różnych podejść do wyrównania pionowego za pomocą: Auto-marginesy, flexbox utils , lub wyświetlacz utils wraz z vertical align utils. Na początku "vertical align utils" wydaje się oczywiste, ale te tylko działają z elementami wyświetlania inline i table. Oto kilka Bootstrap 4 pionowe centrowanie opcje..

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 h-100 sprawia, że wiersz ma pełną wysokość, a my-auto wyśrodkuje kolumnę col-sm-12 w pionie.

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

BS4-Vertical center using auto-margins Demo

my-auto przedstawia marginesy na pionowej osi y i jest równoważna do:

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

2 - środek pionowy z Flexbox:

Ponieważ Bootstrap 4 .row jest teraz display:flex, możesz po prostu użyć align-self-center na dowolnej kolumnie, 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-center na całym .row, aby wyrównać wszystkie col-* w wierszu...

       <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>

BS4-pionowe kolumny o różnej wysokości Demo

3 - Pionowe Centrum Za Pomocą Wyświetlacza Utils:

Bootstrap 4 posiada wyświetlacz utils , który może być używany do display:table, display:table-cell, display:inline, itd.. Mogą one być używane z utils wyrównanie pionowe do wyrównania elementów komórki w linii, bloku w linii lub 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>

BS4-Vertical center using display utils Demo

Zobacz też: Vertical Align Center in Bootstrap 4

Bootstrap 3

Metoda Flexbox na pojemniku z pozycja(y) do centrum:

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

Metoda Transform Translate:

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

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

Metoda wyświetlania inline:

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

Demo metod centrowania Bootstrap 3

Zrobiłem to i robi to, co chcę.

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

A teraz moja strona wygląda jak

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

 ----------------------------------
 |                                |
 |   --------------------------   |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |  |                          |  |
 |   --------------------------   |
 |                                |
 ----------------------------------

Uważam, że poniższy kod działa przy użyciu Chrome, a nie innych przeglądarek 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

Być może będziesz musiał zmienić wysokość (konkretnie na .v-center) i usunąć / zmienić div na div[class*='col-'] dla swoich potrzeb.

To jest moje rozwiązanie. Po prostu dodaj tę klasę do swojego 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>

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

Najpierw ustaw wysokość swoich elementów html i body tak, aby były 100%. To ważne! Bez tego elementy html i body po prostu odziedziczą wzrost swoich dzieci.

html, body {
   height: 100%;
}

Potem miałem klasę kontenera zewnętrznego z:

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

I wreszcie wewnętrzny pojemnik z klasą:

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

HTML jest tak prosty as:

<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 fiddle:

Jsfiddle

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

Odkryłem, że działają fantastycznie tam, gdzie chcę zachować responsywność i konfigurowalność systemu siatki Bootstrap( jak użycie -md lub -sm), ale chcę, aby wszystkie kolumny w danym wierszu miały taką samą wysokość pionową (tak, że mogę następnie wyrównać pionowo ich zawartość i mieć wszystkie kolumny w wierszu dzielić wspólny środek).

CSS / Less:

.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>

Opracowałem nieco odpowiedźzessx , aby ułatwić jej użycie podczas mieszania różnych rozmiarów kolumn na różnych rozmiarach ekranu.

Jeśli używasz Sass , możesz dodać to do swojego 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óry 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żyć na swoich responsywnych kolumnach, takich jak:

<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>

Nie ma potrzeby stosowania tabel i tabel-komórek. Można go ł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>

Ok, przypadkowo zmieszałem kilka rozwiązań i w końcu działa teraz dla mojego układu, gdzie próbowałem zrobić 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>

Zachowania Flex są natywnie obsługiwane od Bootstrap 4. Dodaj d-flex align-items-center w row div. Nie musisz już modyfikować swojego 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>

Z twoim przykładem : 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: https://getbootstrap.com/docs/4.0/utilities/flex/

    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>

Możesz to zrobić na kilka sposobów.]}

1.

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

I css kontenera do

display:table;

1. Użyj padding wraz z Media-screen, aby zmienić padding w stosunku do rozmiaru ekranu. Google @ media screen to know more

2. Użyj względnej wyściółki tj. określ padding w kategoriach %

Hope it helps

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>

Z Bootstrap 4 (który jest obecnie w alpha) możesz użyć klasy .align-items-center. Dzięki temu możesz zachować responsywny charakter Bootstrap. Workes od razu mi pasuje. Zobacz Bootstrap 4 Dokumentacja .

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;
}

Natknąłem się 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 na elementach div, takich jak style = "Float: none" i wszystkie moje elementy div zaczynały się pionowo. Oto działający przykład:

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

Jsfiddle Link

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

W3Schools - Float