Heim > Artikel > Web-Frontend > So zentrieren Sie vertikalen Text in CSS
So zentrieren Sie vertikalen Text in CSS
- WBOYOriginal
- 2021-12-09 15:27:5410208Durchsuche
Methode: 1. Verwenden Sie das Attribut „writing-mode“, um die vertikale Textanzeige festzulegen, die Syntax „text element {writing-mode:vertical-lr}“ 2. Verwenden Sie das Attribut „text-align“, um das festzulegen Um vertikalen Text zu zentrieren, verwenden Sie die Syntax „Textelement {text-align:center}“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So zentrieren Sie vertikalen Text in CSS
In CSS können Sie das Attribut „writing-mode“ verwenden, um die vertikale Anzeige von Text festzulegen, und Sie können das Attribut „text-align“ verwenden, um den Text so einzustellen, dass er zentriert wird .
Die Eigenschaft writing-mode definiert, wie Text horizontal oder vertikal angeordnet wird.
Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<style>
.one {
width:200px;
height: 140px;
border:1px solid #000;
writing-mode: vertical-lr;
text-align:center;
}
</style>
<body>
<div class="one">好好学习</div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo zentrieren Sie vertikalen Text in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Was sind die häufig verwendeten Schriftartattribute in CSS?
- So entfernen Sie den Eingabefeldstil in CSS
- Welche Attribute werden verwendet, um den Stil von Listen in CSS zu steuern?
- So erzielen Sie einen rotierenden Animationseffekt in CSS
- So legen Sie die relative und absolute Positionierung in CSS fest