Maison > Article > interface Web > Comment utiliser CSS pour aligner le texte à gauche, à droite et au centre

Comment utiliser CSS pour aligner le texte à gauche, à droite et au centre

不言original: 2018-11-15 10:26:4524451parcourir

La position du texte est essentielle dans la mise en page d'une page Web. L'article d'aujourd'hui vous expliquera comment utiliser CSS pour obtenir un alignement à gauche, à droite et au centre du texte.

Pour définir l'alignement du texte (alignement à gauche, alignement à droite, alignement au centre), l'attribut CSS que vous devez utiliser est l'attribut text-align. (Recommandations associées : Manuel d'apprentissage CSS)

Format de grammaire :

text-align :(文本位置）

位置	说明
left	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

Voyons ensuite comment définir ces quatre méthodes d'alignement.

Comment définir l'alignement à gauche du texte :

text-align：left;

Comment définir l'alignement à droite du texte :

text-align：right;

Comment définir l'alignement central du texte :

text-align：center;

Méthode de paramétrage de l'alignement du texte :

text-align：justify;

Regardons l'exemple de code spécifique 1 :

TextAlign.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="TextAlign.css" />
    <title></title>
    </head>
    <body>
  <div class="TextLeft">
    php中文网左对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextRight">
    php中文网右对齐<br />
   php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextCenter">
    php中文网居中对齐<br />
    php中文网<br />
    php中文网<br />
    php
  </div>
  <div class="TextJustify">
    php中文网<br />
    两端对齐<br />
    php中文网<br />
    php
    </div>
    </body>
    </html>

TextAlign.css

.TextLeft{
    margin-top:24px;    
    margin-left:32px;    
    border:1px solid #ff6a00;    
    width:480px;    
    text-align:left;
}
.TextRight {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: right;
}
.TextCenter {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: center;
}
.TextJustify {
    margin-top: 24px;    
    margin-left: 32px;    
    border: 1px solid #ff6a00;    
    width: 480px;    
    text-align: justify;    
    text-justify: distribute-all-lines;
}

Afficher les résultats

Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché.

Comment utiliser CSS pour aligner le texte à gauche, à droite et au centre

Exemple de code 2 :

Texte aligné à gauche :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.leftText{
  text-align:left; 
  }
	</style>
</head>
<body>
<div class="leftText">左对齐</div>
</body>
</html>

Texte aligné à droite :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.rightText{
  text-align:right; 
  }
	</style>
</head>
<body>
<div class="rightText">右对齐</div>
</body>
</html>

Alignement centré :

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
.centerText{
  text-align:center; 
  }
	</style>
</head>
<body>
<div class="centerText">居中对齐</div>
</body>
</html>

Cet article se termine ici, en savoir plus sur Pour le contenu d'alignement du texte, vous pouvez prêter attention à la colonne Tutoriel vidéo CSS du site Web PHP chinois ! ! !

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!

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：Quelle est la différence entre DIV+CSS et table ?Article suivant：Quelle est la différence entre DIV+CSS et table ?

Articles Liés

Voir plus