Comment définir l'alignement du centre du texte en CSS

Méthode : 1. Utilisez "text-align:center" ou "margin:0 auto" pour définir l'alignement central horizontal ; 2. Utilisez "line-height:value" ou "display:table-cell;vertical-align:middle " Définissez l'alignement central vertical.

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

1. Centrage horizontal :

(1). Centrage horizontal des éléments en ligne ?

Si l'élément défini est du texte, une image, etc. Élément en ligne, Définissez text-align:center dans l'élément parent pour obtenir centrez l'élément en ligne horizontalement et définissez l'affichage de l'élément enfant sur en ligne- block pour que l'élément enfant devienne un élément en ligne

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

(2) Centrage horizontal des éléments de bloc (largeur fixe)

Lorsque l'élément est défini sur un élément de niveau bloc de largeur fixe, en utilisant du texte- aligner : le centre ne fonctionnera pas. Le centrage peut être obtenu en réglant la valeur « marge gauche et droite » sur « auto ».

<div class="parent" style="">
  <div class="child" style="">DEMO</div>
</div>

.child{
  width: 200px;
  margin: 0 auto;
}

(3)Centrage horizontal des éléments de bloc (largeur indéfinie)

Dans le travail réel, nous rencontrerons la nécessité de définir le centrage des "éléments de niveau bloc à largeur variable", comme la pagination sur Pages Web Navigation, le nombre de paginations étant incertain, on ne peut pas limiter sa flexibilité en définissant la largeur.

Vous pouvez définir directement text-align:center pour les éléments de niveau bloc de largeur variable pour y parvenir, ou vous pouvez ajouter text-align:center à l'élément parent pour obtenir l'effet de centrage.

Lorsque la largeur de l'élément de niveau bloc à largeur variable n'occupe pas une ligne, vous pouvez définir l'affichage sur le type en ligne ou le bloc en ligne (défini sur l'affichage de l'élément en ligne ou l'élément de bloc en ligne)

<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

.container{text-align:center;background: beige}
.container ul{list-style:none;margin:0;padding:0;display:inline-block;}
.container li{margin-right:8px;display:inline-block;}

2. Centrage vertical :

Identique au centrage horizontal, nous parlons ici de centrage vertical. Définissez d'abord deux conditions : L'élément parent est un conteneur de boîte et La hauteur a été définie

Scénario 1 : L'élément enfant est un élément en ligne et sa hauteur est déterminée par Son contenu est étiré

Dans ce cas, vous devez définir la hauteur de ligne de l'élément parent sur sa hauteur pour centrer verticalement l'élément enfant

<div class="wrap line-height">
    <span class="span">111111</span>
</div>

.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }

Scénario 2 :

L'élément enfant est un élément de niveau bloc mais l'enfant La hauteur de l'élément n'est pas définie. Dans ce cas, la hauteur de l'élément enfant est en fait inconnue et ne peut pas être ajustée en calculant le remplissage ou la marge. , mais il existe encore des solutions. Résolvez-le en définissant display:table-cell;vertical-align:middle sur l'élément parent

<div class="wrap">
    <div class="non-height ">11111</div>
</div>

.wrap{
       width:200px ;
       height: 300px;
       border: 2px solid #ccc;
　　　　display: table-cell;
　　　　vertical-align: middle;
}
 .non-height{
       background: green;
        }

Résultat

Scénario 3 : L'élément enfant est un élément de niveau bloc et la hauteur a été définie

Calculer l'enfant La marge supérieure ou inférieure de l'élément, la méthode de calcul est parent (hauteur de l'élément - hauteur de l'élément enfant)/2

<div class="wrap ">
    <div class="div1">111111</div>
</div>

.wrap{
            width:200px ;
            height: 300px;
            border: 2px solid #ccc;
        }
.div1{
            width:100px ;
            height: 100px;
            margin-top: 100px;
            background: darkblue;
        }

Résultat

Tutoriel recommandé : "

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!