Wyrównaj pionowo zawartość kolumny Bootstrap 3

Question

Po powrocie do programowania po czteroletniej przerwie, mam trudny czas w pionie wyrównując zawartość kolumny bootstrap 3 do następnej kolumny. Próbowałem przeszukać tę witrynę, jak również ogólne wyszukiwania ogólnie i nie znalazłem odpowiedniego rozwiązania ... lub moje wyszukiwane hasła są słabe.

W poniższym kodzie HTML/CSS chciałbym wyśrodkować tekst "Tytuł strony" w lewej kolumnie. Chciałbym, aby HTML i CSS były jak najbardziej zwięzłe podczas korzystania z Bootstrap 3 CSS, więc myślę, że kompletnie brakuje mi czegoś prostego.

HTML

<div class="row page-header-box"> 
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div> 
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator"> 
    <div class="page-header-description"><small>Standard Text Description</small></div> 
    <div class="page-header-alt"><small>Additional Text Description</small></div> 
</div> 

CSS

 
    .page-header-box { 
     background-color:#3D3D3D; 
     border-bottom:5px solid #b3b5b8; 
     margin-bottom:10px; 
    } 
    .page-header-title { color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; } 
    .page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; } 
    .page-header-description { color:#febe10; } 
    .page-header-alt { margin-top:5px;color:#0093b2; } 

Oto jsFiddle ... http://jsfiddle.net/E6LcY/8/

Jest to jeden z niewielu razy, jaką kiedykolwiek napisanych, więc wskazując mnie w dobrym kierunku byłoby wspaniale.

Answer 1

Uważałem usunięcie tego pytanie, ale myślę, że odpowiedź może być przydatna dla kogoś innego (jak ja), który szuka możliwego rozwiązania.

Chciałem pozostać w ramach Bootstrap 3 ... i skończyło się na dodaniu trochę kodu JavaScript, aby "uśredniony" był wyśrodkowany. Doszedłem do wniosku, że Bootstrap 3 w zasadzie wymaga jQuery dla pewnej funkcjonalności, więc było OK.

Teraz jestem pewien, że może być lepszy sposób, ale nie podobały mi się inne rozwiązania. Dzięki wszystkim, którzy usiłowali wprowadzić mnie na właściwe tory.

HTML

<div class="row page-header-box"> 
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div> 
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator"> 
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div> 
    <div class="page-header-alt"><small>Additional Text Description</small></div> 
</div> 
</div> 

CSS

.page-header-box { 
background-color:#3D3D3D; 
border-bottom:5px solid #b3b5b8; 
margin-bottom:10px; 
} 
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; } 
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; } 
.page-header-description { color:#febe10; } 
.page-header-alt { margin-top:5px;color:#0093b2; } 

JS (jQuery)

var sep_height = ''; 
$(window).on("load resize", function(e) { 
var seperatorHeight = $('#header-seperator').height(); 
if (seperatorHeight != sep_height) { 
    sep_height = seperatorHeight; 
    var titleHeight = $('#header-title').height(); 
    var difference = ((seperatorHeight - titleHeight)/2) + 5; 
    $('#header-title').css('margin-top', difference + 'px'); 
} 
}); 

Uwaga: "sep_height" jest po prostu tak, że nie robią niepotrzebnych obliczeń i zmieniaj tylko wysokość tytułu, kiedy zajdzie taka potrzeba. Dodaję również dodatkowe 5 pikseli do górnego marginesu, aby zrekompensować marginesy w tekście opisu.

Oto najnowszy skrzypce (z poprawką na zdarzenia onload): http://jsfiddle.net/E6LcY/15/

Jeszcze raz dziękujemy wszystkim, którzy pomogli.

Answer 2

Dodaj regułę: line-height: 45px; do klasy

UPDATED FIDDLE

Answer 3

kol-MD-2, to jak to zrobić, możesz spróbować tego:

.Parentdiv{ 
position:relative; 
width:100%; 
height:100%; 
} 

.Parentdiv .childdiv{ 
position: absolute; 
top:0; 
bottom:0; 
margin:auto; 
} 

Answer 4

W pewnym sensie zaczynam znużać się bootstrapem. Czasami ilość hakowania wymagana do osiągnięcia określonych funkcji nie jest warta rzekomych korzyści, jakie możesz uzyskać z jej używania.

W tym przypadku, zakończony archiwizacji funkcjonalność co potrzebne rezygnując bootstrap i stosując kombinację flexboxes z tych właściwości stosuje się do dominującej:

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

zagrożeń dla dzieci:

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

i zapytanie o nośnik:

@media all and (max-width: 500px) { 
    .parent { 
    /* for small screens, we use column direction rather than row */ 
    flex-direction: column !important; 
    } 
} 

Podany html jest jak to:

<div class="parent"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Użyłem tego na przykład dla stopki responsywnej. Gra z kombinacją pewnej ustalonej szerokości i marginesu (tak samo dla każdego), są ładnie wyrównane względem innych w różnych ilościach na wiersz, w zależności od szerokości ekranu, dopóki nie jest wystarczająco wąska, aby pokazać je tylko w jednym rzędzie .

Moim zdaniem, o wiele jaśniejsze, łatwiejsze, czystsze i mniej kodu, z lepszą reakcją, lepszą obsługą układu, unika używania javascript i bez całego narzutu i kłopotów z bootstrapem.