Z tego wynika dość prosta i częsta zależność - trzeba dymać zadania próbne. Właśnie dostałem takowe i pół nocy spędziłem na szukaniu prostego rozwiązania.
Chodziło o wycentrowanie tekstu wertykalnie w divie. Ale bootstrap ma pewne ograniczenia. Podobno coś tam się kłóci, jedno z drugim.
Czego to ja nie próbowałem. Jumbotronów, buttonów i innych tronów. Niemniej, udało mi się znaleźć proste (acz nie prostackie) rozwiązanie tutaj.
Cytując za autorem, napisałem tak:
html
<div class="text-center" id="vertical">
Tu jest tekst do wycentrowania wertykalno-horyzontalnego</div>
css
#vertical {
height: 60px;
line-height: 60px;}
I tyle dobrego...
UPDATE:
Znajomy zwrócił mi uwagę, że rozwiązanie to nie do końca musi być pikne. Wróciłem do przykładów omawianych w sieci, ale nie działały... Co prawda wczoraj robiłem to o pierwszej w nocy, więc z rana poszło lepiej.
Pozmieniałem trochę na czuja i wyszło coś takiego:
html
css
1 2 3 4 <div class="text-center" id="gradient"> <div class="vcenter pseudo"></div> <div class="vcenter">Skontaktuj się z agentem</div> </div>
1 2 3 4 5 6 7 .vcenter { display: inline-block; vertical-align: middle; float: none; } .vcenter.pseudo { height: 100%; }
.
Są jeszcze inne sposoby centrowania, już nie dla bootstrapa, np. potraktowanie elementów jako css-tabeli:
html:
<div id="parent">
<div id="child">Content here</div>
</div>
css:
#parent {display: table}
#child {
display: table-cell;
vertical-align: middle;
}
IE Fix:
child {display: inline-block}
Jest też takie rozwiązanie:
.valign {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}