Comment centrer du texte en CSS ? Comment définir le centrage vertical du texte CSS

Dans le processus de conception Web, vous devrez parfois centrer le texte pour une belle mise en page. Alors, comment centrer le texte ? Cet article vous présentera la méthode de définition du centrage vertical du texte en css.

Tout d'abord, il faut savoir qu'il est relativement simple de réaliser un centrage horizontal des éléments via CSS : pour le texte, il suffit de définir text-align : center sur son élément parent, et pour les éléments de niveau bloc tels que div, il vous suffit de définir les valeurs de marge gauche et droite pour obtenir un centrage vertical des éléments, certaines personnes penseront à l'attribut vertical-align en CSS, mais cela ne prend effet que pour les éléments avec l'attribut valign. Alors maintenant, jetons un coup d'œil aux méthodes d'implémentation CSS pour le centrage vertical d'un seul texte et le centrage vertical multi-texte.

Regardons d'abord le centrage vertical du texte CSS sur une seule ligne

Pour le texte sur une seule ligne, il nous suffit de modifier la hauteur de la ligne de texte (line-height) et la zone Réglez simplement la hauteur pour qu'elle soit cohérente.

Code d'implémentation du centrage vertical du texte CSS sur une seule ligne :

HTML :

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS :

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

L'effet de centrage vertical du texte CSS sur une seule ligne est le suivant :

Ensuite, jetons un coup d'œil au centrage vertical d'un texte multiligne

Description : Il existe deux cas de centrage vertical d'un texte multiligne. L'un est celui de la hauteur du texte multiligne. L'élément parent n'est pas fixe et change avec le contenu ; l'autre est que la hauteur de l'élément parent n'est pas fixe.

1. La hauteur de l'élément parent n'est pas fixe

Lorsque la hauteur de l'élément parent n'est pas fixe, la hauteur ne peut être agrandie que par le texte interne . Ainsi, nous pouvons faire apparaître le texte centré verticalement en définissant la valeur de padding, il suffit de définir les valeurs de padding-top et padding-bottom pour qu'elles soient égales :

texte multiligne css verticalement centré Code :

HTML :

  <div id="div1">
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中，
            php中文网多行文本垂直居中。
    </div>

CSS :

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

L'effet de centrage vertical du texte multiligne CSS est le suivant :

2. La hauteur de l'élément parent est fixe

L'attribut vertical-align en CSS ne prend que L'effet pour les éléments avec l'attribut valign, combiné avec display: table;, peut permettre à div de simuler l'attribut table. Par conséquent, nous pouvons définir l'attribut d'affichage du div parent : display: table;; puis ajouter un div contenant du contenu textuel et définir son display: table-cell et vertical-align: middle.

Code de centrage vertical du texte multiligne CSS :

HTML :

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中，
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS :

#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

L'effet de centrage vertical du texte multiligne CSS est le suivant :

Cet article se termine ici. . Présenté un par un, pour des informations plus intéressantes, vous pouvez prêter attention au site Web chinois php.

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!