piątek, 14 sierpnia 2015

Wertykalne centrowanie tekstu w css dla bootstrapa

Każdy szanujący się, początkujący programista, cierpi na ból głowy oraz... brak portfolio.
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

1
2
3
4
<div class="text-center" id="gradient">
  <div class="vcenter pseudo"></div>
  <div class="vcenter">Skontaktuj się z agentem</div>
</div>

css

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