So zentrieren Sie CSS-Text

Beim Entwerfen einer Seite ist das Layout des Textes besonders wichtig. Die Textzentrierungsmethode in CSS kann auf die folgenden drei Arten erreicht werden.

1. text-align-Attribut text-align属性

text-align属性可以用来控制文本的水平对齐方式，包括左对齐、右对齐、居中以及两端对齐等。

div{
  text-align: center;
}

其中center表示居中，使用该属性并将值设为center后，文本便会自动居中对齐。

二、line-height属性

line-height属性表示行高，它可以用来设置行内元素的垂直居中。当设置行高等于盒子高度时，文本就会垂直居中。

div{
  height: 200px;
  line-height: 200px;
  text-align: center;
}

这样就可以实现文本居中对齐了。

三、display和text-align属性

可以通过display属性将文本元素转换为弹性盒子布局，再通过justify-content属性来控制水平居中。其中justify-content属性可以设置不同的值，包括center、flex-start、flex-end

text-align-Attribut kann verwendet werden, um die horizontale Ausrichtung von Text zu steuern, einschließlich linker Ausrichtung, rechter Ausrichtung, Mitte und Ausrichtung beide Enden warten.

div{
  display: flex;
  justify-content: center;
}

wobei center Zentrierung bedeutet. Nachdem Sie dieses Attribut verwendet und den Wert auf center gesetzt haben, wird der Text automatisch in der Mitte ausgerichtet. 🎜🎜2. line-height-Attribut 🎜🎜 Das line-height-Attribut stellt die Zeilenhöhe dar, mit der die vertikale Zentrierung von Inline-Elementen festgelegt werden kann. Wenn Sie die Zeilenhöhe auf die Feldhöhe einstellen, wird der Text vertikal zentriert. 🎜rrreee🎜Auf diese Weise können Sie den Text zentriert ausrichten. 🎜🎜3. display- und text-align-Attribute🎜🎜Sie können das display-Attribut verwenden, um das Textelement in ein flexibles Box-Layout umzuwandeln. und verwenden Sie dann die Eigenschaft >justify-content, um die horizontale Zentrierung zu steuern. Das Attribut justify-content kann auf verschiedene Werte gesetzt werden, einschließlich center, flex-start, flex-end , Bedeutet jeweils zentriert, linksbündig, rechtsbündig usw. 🎜rrreee🎜Die oben genannten drei Methoden zum horizontalen Zentrieren von chinesischem Text in CSS können flexibel verwendet werden, um die Seite schöner zu machen. Wenn Sie den Text vertikal und horizontal zentrieren müssen, können Sie eine Kombination der beiden oben genannten Methoden verwenden. Gleichzeitig ist zu beachten, dass die von verschiedenen Elementstilen verwendeten Zentriermethoden unterschiedlich sein können und die geeignete Methode entsprechend der spezifischen Situation ausgewählt werden muss. 🎜

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie CSS-Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!