Maison > Article > interface Web > Comment centrer le texte vertical en CSS

Comment centrer le texte vertical en CSS

WBOYoriginal: 2021-12-09 15:27:5410137parcourir

Méthode : 1. Utilisez l'attribut "writing-mode" pour définir l'affichage vertical du texte, la syntaxe "text element {writing-mode:vertical-lr}" 2. Utilisez l'attribut "text-align" pour définir le texte vertical à centrer, la syntaxe "text Element {text-align:center}".

L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.

Comment centrer le texte vertical en CSS

En CSS, vous pouvez utiliser l'attribut writing-mode pour définir l'affichage vertical du texte, et vous pouvez utiliser l'attribut text-align pour définir le texte à centrer .

La propriété writing-mode définit la manière dont le texte est disposé horizontalement ou verticalement.

L'exemple est le suivant :

<!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>

Résultat de sortie :

Comment centrer le texte vertical en CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html5 css css3

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir le positionnement relatif et le positionnement absolu en CSSArticle suivant：Comment définir le positionnement relatif et le positionnement absolu en CSS

Articles Liés

Voir plus