Zentrierung beibehalten nach ausgeschaltetem Word-Wrapping

Diskutiere Zentrierung beibehalten nach ausgeschaltetem Word-Wrapping im CSS Forum im Bereich Programmierung; Hallo liebe Community, ich bin Anfänger also seht mir bitte jegliche Ungenauigkeiten im Ausdruck und ein verringertes Verständnis nach :) Es...
A

Alabasta

New member
Beiträge
1
Punkte Reaktionen
0
Hallo liebe Community,

ich bin Anfänger also seht mir bitte jegliche Ungenauigkeiten im Ausdruck und ein verringertes Verständnis nach :)

Es geht darum:

Ich habe bei Squarespace einen Custom CSS-Code eingebaut, funktioniert auch alles wunderbar, aber ich musste das Text-Wrapping in einem Titel deaktivieren, damit das Wort nicht an ganz merkwürdigen Stellen gebrochen wird. Nun habe ich habe Schwierigkeiten, das Wort wieder vernünftig in der Mitte zu zentrieren. Hat jemand eine Idee, wie ich die Zentrierung wiederherstelle, obwohl das Wrapping ausgeschaltet ist?

Das Wort "Bewerbungsgespräch" ist nun nicht mehr wirklich zentriert.

Der Code:
h3.preSlide.slideIn
{
text-align:center;
word-wrap:normal;
}

Das Ergebnis seht ihr im Anhang.
 

Anhänge

  • Bildschirmfoto 2022-06-08 um 15.05.57.png
    Bildschirmfoto 2022-06-08 um 15.05.57.png
    936,1 KB · Aufrufe: 5
S

Sempervivum

Well-known member
Beiträge
215
Punkte Reaktionen
35
Ich habe das mal untersucht und meine Vermutung hat sich bestätigt: Wenn der Container zu schmal ist und der Text nicht mehr hinein passt, ragt er nur rechts über die Grenze hinaus, so dass er nicht mehr richtig zentriert ist. Verwendet man Flexlayout und text-align: center; gleichzeitig, so funktioniert es:
Code:
    <style>
        h1.bewerbung1 {
            width: 7em;
            border: 2px solid lightblue;
            text-align: center;
            margin: 0 auto;
        }
        h1.bewerbung2 {
            width: 7em;
            border: 2px solid lightblue;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

    </style>
    <h1 class="bewerbung1">
        So klappt das Bewerbungsgespräch
    </h1>
    <h1 class="bewerbung2">
        So klappt das Bewerbungsgespräch
    </h1>
 
Thema:

Zentrierung beibehalten nach ausgeschaltetem Word-Wrapping

Oben Unten