• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

wyśrodkowanie tekstu w pionie

0 głosów
110 wizyt
pytanie zadane 8 października 2016 w HTML i CSS przez użytkownika redstar1 Bywalec (2,090 punkty)
<div class="tile_footer" 
style="background:blue; width:100%; height: 36%; position:absolute; top:64%; left:0; right:0; bottom: 0;">

<div style="position:absolute; width:100%; color: white; text-align: center; z-index: 999; font-size: 4vw;">
MILION
</div>

</div>

Mam taki kod wszystko jest ok tylko jak mogę wyśrodkować w pionie napis MILION?

4 odpowiedzi

0 głosów
odpowiedź 8 października 2016 przez użytkownika Spiral Obywatel (1,290 punkty)
edycja 8 października 2016 przez użytkownika Spiral

Najprościej byłoby ustawić dla diva w którym jest tekst

line-height:X;

Gdzie X jest pożądaną wysokością kontenera w którym ma się owy napis wyśrodkować. Sprawdź to w działaniu (wypróbuj różne wartości).


Jeśli to nie jest wystarczające rozwiązanie to jeszcze flexbox bardzo dobrze sobie z tym radzi.

0 głosów
odpowiedź 8 października 2016 przez użytkownika skav3n Bywalec (2,640 punkty)

Możesz użyć transforma.

div milion {
top: 50%;
transform: translateY(-50%);
}

 

0 głosów
odpowiedź 8 października 2016 przez użytkownika dewe Gaduła (3,930 punkty)
Może spróbuj pokombinować z

padding: 50% 0%;

ewentualnie

display: table-cell;

vertical-align: middle;
0 głosów
odpowiedź 9 października 2016 przez użytkownika zgrybus Gaduła (4,400 punkty)
display: flex;
justify-content: center;
align-items: center; 

 

Musisz dodać do elementu nadrzędnego :)

komentarz 9 października 2016 przez użytkownika dewe Gaduła (3,930 punkty)
z tego co pamiętam display: flex nie działa na telefonach więc średnie rozwiązanie :P

Podobne pytania

+1 głos
3 odpowiedzi 78 wizyt
pytanie zadane 15 listopada 2016 w HTML i CSS przez użytkownika Dynamic Bywalec (2,310 punkty)
0 głosów
2 odpowiedzi 53 wizyt
pytanie zadane 3 sierpnia 2016 w HTML i CSS przez użytkownika alus152 Bywalec (2,570 punkty)
0 głosów
3 odpowiedzi 67 wizyt
pytanie zadane 27 października 2016 w HTML i CSS przez użytkownika Marchiew Użytkownik (540 punkty)
...