ugrás a tartalomhoz

Középre igazított szöveg (CSS)

mind1 valami név · 2021. Már. 19. (P), 11.34
Egyszerűbb "élőben":
https://pypro.eu.pythonanywhere.com/
Update: csak akkor kattints a fentire, ha nem gond, ha látom az IP címed! Most vettem észre, hogy a fenti oldal az access logba beleteszi a kliens IP címét is!

Ha desktopon nyitod meg, a "Learning to Flask :)" szöveg normálisan jelenik meg.
Ha egy szűkre vett ablakból teszed ezt vagy mobilról, akkor kettétörik a szöveg és kilóg a "konténer" div-ből alul-felül.

Segítene valaki megérteni, hogy miért történik ez?
(a CSS valami tutorialból lett kimásolva, csak a borderrel és a színekkel barkácsoltam, a pozicionálás maradt az eredeti)

Egyáltalán: ha mind vertikálisan, mind horizontálisan középen akarok tartani egy szöveget, azt tényleg csak ilyen "trükközésekkel" lehet? Mert horizontálisan ott a text-align attribútum, de vertikálisan...?
‹ Firefox megjelenítési hiba Miért nem engedik a böngészők CSS-sel változtatni a checkbox, select, Tallózás elemeket? ›
 ■
1

Flex

Endyl · 2021. Már. 19. (P), 11.47
A .headcontainer-nek fix magassága van. Erre szükség is van, mert az egyetlen gyereke abszolút pozícionálású, így nem járulna hozzá a szülője méreteihez. Így viszont ha nagyobb lesz a gyerek, ki fog lógni.

Szép középre igazításhoz jó megoldás a css flexbox.
.headcontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 120px;
}
A .pagehead-nek pedig nem kell sem position, sem translate. A min-height helyett normális margót könnyebben beállíthatsz a .headcontainer-en padding-toppal és padding-bottommal.
2

Köszi szépen! (költői a

mind1 valami név · 2021. Már. 19. (P), 11.59
Köszi szépen! (költői a kérdés: vajon a tutorialokban miért van ennyire elbonyolítva, amikor nem az egyéb funkciókat magyarázzák, hanem kifejezetten a középre igazítást)
3

Hasznos lehet ez is

Endyl · 2021. Már. 19. (P), 12.18
Hasznos ez a position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); középre igazítás, csak nem feltétlenül ebben az esetben. Inkább akkor, ha egy meglévő tartalmat el akarsz takarni úgy, hogy a takarás a közepéről induljon (pl. valamilyen párbeszédablak, ami egy adott dobozra vonatkozik).

Szóval csak leírtak egy módszert anélkült, hogy rendesen körbejárták volna és mondtak volna példát használati esetekre.
4

Értem (remélem ;) ) Köszi.

mind1 valami név · 2021. Már. 19. (P), 12.39
Értem (remélem ;) )

Köszi.