Jak korzystać z wyrównania w pionie w bootstrapie

Question

Prosty problem: Jak wyrównać w pionie col w col za pomocą bootstrap? Przykładem tutaj (chcę pionowo wyrównać child1a i child1b):

http://bootply.com/73666

HTML

<div class="col-lg-12"> 

    <div class="col-lg-6 col-md-6 col-12 child1"> 
    <div class="col-12 child1a">Child content 1a</div> 
    <div class="col-12 child1b">Child content 1b</div> 

    </div> 


    <div class="col-lg-6 col-md-6 col-12 child2"> 
    Child content 2<br> 
    Child content 2<br> 
    Child content 2<br> 
    Child content 2<br> 
    Child content 2<br> 

    </div> 

</div> 

UPDATE

Niektóre CSS:

.col-lg-12{ 
top:40px; 
bottom:0px; 
border:4px solid green; 


} 

    .child1a, .child1b{ 
    border:4px solid black; 
    display:inline-block !important; 
} 

.child1{ 
    border:4px solid blue; 
    height:300px; 
    display:table-cell !important; 
    vertical-align:middle; 
} 

.child2{ 
    border:4px solid red; 
} 

Answer 1

.parent { 
    display: table; 
    table-layout: fixed; 
} 

.child { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

table-layout: fixed zapobiega łamanie funkcjonalności koledzy * klas.

Answer 2

To znaczy, że chcesz 1b i 1b być obok siebie?

<div class="col-lg-6 col-md-6 col-12 child1"> 
     <div class="col-6 child1a">Child content 1a</div> 
     <div class="col-6 child1b">Child content 1b</div> 
</div> 

Answer 3

dla rodzica: display: table;

Dla dziecka: display: table-cell;

Następnie dodać vertical-align: middle;

mogę ryba ale teraz czas do domu, yay!

OK tu jest piękny skrzypce: http://jsfiddle.net/lharby/AJAhR/

.parent { 
    display:table; 
} 

.child { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
} 

Answer 4

http://jsfiddle.net/b9chris/zN39r/

HTML:

<div class="item row"> 
    <div class="col-xs-12 col-sm-6"><h4>This is some text.</h4></div> 
    <div class="col-xs-12 col-sm-6"><h4>This is some more.</h4></div> 
</div> 

CSS:

div.item div h4 { 
    height: 60px; 
    vertical-align: middle;  
    display: table-cell; 
} 

Ważne uwagi:

• vertical-align: middle; display: table-cell; muszą być stosowane do znacznika, który nie ma cl Bootstrap zastosowane osły; nie może to być col-*, row, itp.
• Nie można tego zrobić bez tego dodatkowego, prawdopodobnie bezsensownego tagu w kodzie HTML, niestety.
• Tła są niepotrzebne - są tam tylko do celów demonstracyjnych. Nie musisz więc stosować żadnych specjalnych reguł do tagów row lub col-*.
• Należy zauważyć, że wewnętrzny znacznik nie rozciąga się do 100% szerokości jego rodzica; w naszym scenariuszu nie miało to znaczenia, ale może dla ciebie.Jeśli tak, możesz skończyć z czymś bliżej do niektórych innych odpowiedzi tutaj:

http://jsfiddle.net/b9chris/zN39r/1/

CSS:

div.item div { 
    background: #fdd; 
    table-layout: fixed; 
    display: table; 
} 
div.item div h4 { 
    height: 60px; 
    vertical-align: middle;  
    display: table-cell; 
    background: #eee; 
} 

Wskazówka dodanych table-layout i wyświetlanie właściwości na col-* tagi. To musi być zastosowane do tagów, które mają zastosowane col-*; to nie pomoże na innych tagach.

Answer 5

Może stary temat, ale jeśli ktoś potrzebuje dalszej pomocy, wykonaj następujące czynności (umieszcza tekst w środkowej linii, jeśli ma większą wysokość niż tekst).

HTML:

<div class="row display-table"> 
    <div class="col-xs-12 col-sm-4 display-cell"> 
     img 
    </div> 
    <div class="col-xs-12 col-sm-8 display-cell"> 
     text 
    </div> 
</div> 

CSS:

.display-table{ 
    display: table; 
    table-layout: fixed; 
} 

.display-cell{ 
    display: table-cell; 
    vertical-align: middle; 
    float: none; 
} 

Ważną rzeczą, że brakowało mi na to "pływaka: none;" ponieważ został spławiony w lewo od atrybutów bootstrap col.

Pozdrawiam!

Answer 6

Musiałem dodać szerokość: 100%; wyświetlić tabelę, aby naprawić dziwne bahwole w IE i FF, kiedy użyłem tego przykładu. IE i FF miał pewne problemy z wyświetlaniem Col-MD- * tagów na prawym szerokości

.display-table { 
     display: table; 
     table-layout: fixed; 
     width: 100%; 
} 

.display-cell { 
     display: table-cell; 
     vertical-align: middle; 
     float: none; 
} 

Answer 7

Z Bootstrap 4, można to zrobić o wiele łatwiej: odpowiedź http://v4-alpha.getbootstrap.com/layout/flexbox-grid/#vertical-alignment

Answer 8

Prinsen jest najlepszym wyborem. Aby jednak rozwiązać problem polegający na tym, że kolumny nie zwijają się, jego kod musi być otoczony przez instrukcję sprawdzania nośnika. W ten sposób te style są stosowane tylko wtedy, gdy aktywne są większe kolumny. Oto zaktualizowana pełna odpowiedź.

HTML:

<div class="row display-table"> 
    <div class="col-xs-12 col-sm-4 display-cell"> 
     img 
    </div> 
    <div class="col-xs-12 col-sm-8 display-cell"> 
     text 
    </div> 
</div> 

CSS:

@media (min-width: 768px){ 
    .display-table{ 
     display: table; 
     table-layout: fixed; 
    } 

    .display-cell{ 
     display: table-cell; 
     vertical-align: middle; 
     float: none; 
    } 
}