Quelles sont les méthodes d'alignement en CSS

Méthode : 1. Utilisez le style "text-align:center" pour obtenir un centrage horizontal. 2. Utilisez le style "line-height: line height;" pour obtenir un centrage vertical. 3. Utilisez le style « align-items:center;justify-content:center » pour obtenir un centrage horizontal et vertical.

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

Quelles sont les méthodes d'alignement en CSS

1. Centrage horizontal

• Centrage horizontal des éléments en ligne

Si l'élément est défini sur un élément en ligne tel qu'un texte, une image, etc. ., dans l'élément parent Définissez text-align:center pour obtenir un centrage horizontal des éléments en ligne et définissez l'affichage des éléments enfants sur inline-block pour que les éléments enfants deviennent des éléments en ligne

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div></div>
<style>
.parent{text-align: center;}    
.child{display: inline-block;}
</style>

• Centrage horizontal des éléments de bloc (fixe width)

Lorsque l'élément en cours de définition est un élément de niveau bloc à largeur fixe, text-align: center ne fonctionnera pas. Le centrage peut être obtenu en réglant la valeur « marge gauche et droite » sur « auto ».

<div class="parent" style="background-color: gray;">
  <div class="child" style="background-color: lightblue;">DEMO</div>
  </div>
  <style>
.child{
            width: 200px;
            margin: 0 auto;
        }
        </style>

• 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", tels que la navigation par pagination sur les pages Web , car Le nombre de paginations n'est pas défini, nous ne pouvons donc 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>
<style>
.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;}
</style>

2. centrage

et centrage horizontal Pareil, nous voulons parler ici du 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. L'élément enfant est un élément en ligne et la hauteur est prise en charge. par son contenu. Dans ce cas, vous devez passer Définir la hauteur de ligne de l'élément parent à sa hauteur pour centrer les éléments enfants verticalement

<div class="wrap line-height">
    <span class="span">111111</span></div>
<style>
.wrap{
            width:200px ;
            height: 300px;
            line-height: 300px;
            border: 2px solid #ccc;
        }
.span{
            background: red;
        }
</style>

3. Centrer horizontalement et verticalement

Dans la balise css, définissez le display attribut to flex pour implémenter la disposition flex, puis align-items L'attribut est défini sur center (centré horizontalement) et l'attribut justification-content est défini sur center (centré verticalement). Vous pouvez le définir pour qu’il soit centré horizontalement et verticalement.

76c82f278ac045591c9159d381de2c57
9fd01892b579bba0c343404bcccd70fb
93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    8f6d5a544bbc0d98e0f297ef053f784d
    ef0e6bda9678de73355aeb4407692a87
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
    f0873f1cb3abec04fcd24e69fa165f9c
        45a2772a6b6107b401db3c9b82c049c2测试54bdf357c58b8a65c66d7c19c8e4d114
16b28748ea4df4d9c2150843fecfba68
46d5fe1c7617e3914f214aaf043f4ccf
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
531ac245ce3e4fe3d50054a55f265927
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Pour plus de connaissances sur la programmation, veuillez visiter :

Vidéo de programmation

 ! !

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!