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

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

不言
Libérer: 2018-11-15 10:26:45
original
24499 Les gens l'ont consulté

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 :

1

text-align :(文本位置)

Copier après la connexion
位置说明
left左对齐
right右对齐
center居中对齐
justify两端对齐

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

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

1

text-align:left;

Copier après la connexion

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

1

text-align:right;

Copier après la connexion

Comment définir l'alignement central du texte :

1

text-align:center;

Copier après la connexion

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

1

text-align:justify;

Copier après la connexion

Regardons l'exemple de code spécifique 1 :

TextAlign.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

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

Copier après la connexion

TextAlign.css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

.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;

}

Copier après la connexion

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 :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

Copier après la connexion

Texte aligné à droite :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

Copier après la connexion

Alignement centré :

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal