Javascript-Center-Text

Michael Zippo 04.11.2021

In diesem CSS-Tutorial erfahren Sie, wie Sie Text zentrieren und Elemente blockieren. Es gibt mehrere Tricks, mit denen Sie Elemente in einem Layout horizontal und vertikal zentrieren k√∂nnen.

Um Text in einem gr√∂√üeren Element zentriert auszurichten, verwenden Sie text-align: center; as siehe unten:

Ich bin ein div

Und der gesamte Text wird durch text-align: center

Blockelemente zentrieren:

Das Zentrieren von Blockelementen wird am besten mit dem Tag eines HTML-Dokuments veranschaulicht. Sie mussen lediglich die Breite des gesamten Containers steuern und dann den Rand auf Auto setzen:

Ich bin ein div

Und der gesamte Text wird zentriert durch text-align: center

Bild zentrieren:

Um ein Bild zu zentrieren, √§ndern Sie im CSS-Selektor Ihre Anzeige auf Blockieren und steuern Sie dann die Breite des Bildelements mit % oder px. margin auf auto setzen:

Um das Bild unten zu zentrieren, √§ndern Sie die Anzeige auf Block und setzen Sie dann die R√§nder auf Auto, steuern Sie die Breite mit px oder %

Vertikale und horizontale Zentrierung in einem Div:

Padding:

Zum vertikalen Zentrieren in einem ‚Äì Sie k√∂nnen dann text-align: centerverwenden, um den Absatz horizontal zu zentrieren:

Um das Bild unten zu zentrieren, √§ndern Sie die Anzeige auf Block und setzen Sie dann die R√§nder auf Auto, steuern Sie die Breite mit px oder %

line-height:

Sie k√∂nnen line-height auch auf die H√∂he des Blockelements setzen, das Sie in Verbindung mit Text zentrieren -align: center, um das Element zentriert auszurichten. Wenn Sie mehrere Zeilen haben, verwenden Sie line-height fur Eltern und Kind und fugen Sie vertical-align: middle und display: inline-block zum Kind hinzu:
< /p>

transform:

Eine weitere M√∂glichkeit zum Zentrieren von Elementen ist die Verwendung von Position und Transformation. Setzen Sie das ubergeordnete Element auf position: relativ, das untergeordnete Element auf absolute Positionierung. Das untergeordnete Element muss oben und links bei 50% positioniert werden und dann verwenden wir die transform-Eigenschaft, um den Text im div anzupassen. Wir werden mehr uber dieses Objekt in einem anderen Beitrag sprechen, damit es in Ordnung ist, wenn es im Moment nicht zu 100 Prozent klar ist:

Flexbox:

Zuletzt k√∂nnen wir Elemente mithilfe von Flexbox zentrieren. Set display: flex auf das ubergeordnete Element der untergeordneten Elemente, die Sie zentrieren m√∂chten, und verwenden Sie dann align-items und justify-content, um es zu zentrieren:

Dies sind die g√§ngigsten Methoden, um das Problem der Zentrierung Ihrer Elemente in Ihrem Layout zu l√∂sen.