Text ausrichten

  • Hallo @ all,

    überall im Netz wird beschrieben, das man Text mit display: table-cell; und vertical-align: middle; vertikal ausrichten kann. Warum funktioniert das bei mir nicht. Hab alles versucht. Mochte eine h1 horizontal als auch vertikal mittig ausrichten. Hab es in der style.css mit der h1 versucht und habe es auch mit einem div-container versucht, aber es geht einfach nicht. Was mach ich verkehrt. Bin nun ratlos.


    Ach so, kann mir vielleicht mal jemand erklären, wie ich meinen Code nochmal hier rein stellen kann. Hab mein Zettel leider versiebt.


    Dankeschön und LG

  • Hallo Peregrina!

    Zitat

    überall im Netz wird beschrieben, das man Text mit display: table-cell; und vertical-align: middle; vertikal ausrichten kann.

    Das trifft zu und es sollte so auch funktionieren. Aaaber: Wenn es um Layoutfragen geht, sind gefühlte 70% der Fundstellen im Netz veraltet, so auch in diesem Fall. Verwende Flexlayout:

    Code
    1. h1 {
    2. display: flex;
    3. align-items: center;
    4. justify-content: center;
    5. }

    Näheres z. B. hier:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  • Hallo Peregrina!

    Das trifft zu und es sollte so auch funktionieren. Aaaber: Wenn es um Layoutfragen geht, sind gefühlte 70% der Fundstellen im Netz veraltet, so auch in diesem Fall. Verwende Flexlayout:

    Code
    1. h1 {
    2. display: flex;
    3. align-items: center;
    4. justify-content: center;
    5. }

    Näheres z. B. hier:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Sempervivum, hab ich probiert, funktioniert nicht. Der Text ist zwar horizontal mittig ausgerichtet, aber nicht vertikal.

  • Damit die vertikale Ausrichtung funktioniert, musst Du das Flex-CSS dem umgebenden Container geben, d. h. wenn Du das h1 zentrieren willst, dem body:

    Und es muss freier Raum für die Zentrierung vorhanden sein, daher height: 100%;

  • Damit die vertikale Ausrichtung funktioniert, musst Du das Flex-CSS dem umgebenden Container geben, d. h. wenn Du das h1 zentrieren willst, dem body:

    Und es muss freier Raum für die Zentrierung vorhanden sein, daher height: 100%;

    Dankeschön, nun funktioniert es. Ich habe mich mit display:flex; noch nicht so auseinandergesetzt. Wirkt sich das jetzt auch auf alles aus oder muss ich dem jeweiligen Element das auch wieder zuordnen. Und kann ich das auch mit anderen display Angaben komponieren oder hebt sich das dann gegenseitig wieder auf?

  • Nein, das wirkt sich nur auf das Element aus, wo Du die Angaben notiert hast. Wird also nicht an Elemente darunter vererbt. Und für display ist nur eine Angabe möglich, die dann flex, grid, block, inline-block oder inline sein kann. Lies dir am besten mal die Beschreibung unter dem Link durch, den ich oben gepostet habe.


    Edit: Wenn es sich um verschiedene Container handelt kannst Du aber jeweils ein unterschiedliches display verwenden.