Text ausrichten

Peregrina · 5. September 2020

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

m.scatello · 5. September 2020

Zitat von Peregrina

kann mir vielleicht mal jemand erklären, wie ich meinen Code nochmal hier rein stellen kann

html-seminar.de/woltlab/attachment/2622/

Sempervivum · 5. September 2020

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

h1 {
    display: flex;
    align-items: center;
    justify-content: center;
}

Näheres z. B. hier:

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

Peregrina · 18. September 2020

Zitat von m.scatello

html-seminar.de/woltlab/attachment/2622/

Dankeschön, m.scatello

Peregrina · 18. September 2020

Zitat von Sempervivum
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
h1 {
    display: flex;
    align-items: center;
    justify-content: center;
}
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.

Peregrina · 18. September 2020

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>blabla</title>
        
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <meta name="language" content="deutsch">
        <meta name="copyright" content="">
        <meta name="keywords" content="">
        <meta name="title" content="">
        
        <link rel="Stylesheet" type="text/css" href="css/design.css"/>
    </head>
    
    <body>
        <h1>DER WEG IST DAS ZIEL</h1>
    </body>
</html>

@import url('https://fonts.googleapis.com/css?family=Philosopher');
@import url('https://fonts.googleapis.com/css2?family=Aladin');

* {
    margin: 0;
    padding: 0;
}

html,body {
    background: url(../img/Landschaft/1.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: cover;
}

h1 {
    color: #9af3fb;
    /*text-align: center; 
    display: table-cell;
    vertical-align: middle;*/
    font-family: 'Aladin', cursive;
    font-size: 100px;
    font-weight: bold;
    text-shadow: 2px 2px 1px #000000;
    filter: dropshadow(color=#000000, offx= 2, offy=2);
    display: flex;
    align-items: center;
    justify-content: center;
}

Alles anzeigen

Peregrina · 18. September 2020

basti1012, nein. Ich habe eine externe CSS Datei. Wieso kann ich dich nicht zitieren?

Sempervivum · 18. September 2020

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

Code

        html,
        body {
            background: url(../img/Landschaft/1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            background-size: cover;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

Alles anzeigen

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

Peregrina · 18. September 2020

Zitat von Sempervivum

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

Code

        html,
        body {
            background: url(../img/Landschaft/1.jpg);
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed;
            background-size: cover;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

Alles anzeigen

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?

Sempervivum · 18. September 2020

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.

Text ausrichten

Jetzt mitmachen!

Teilen

Tags