Quelles sont les méthodes d'alignement en CSS-tutoriel CSS-php.cn

Quelles sont les méthodes d'alignement en CSS

WBOY

Libérer： 2021-11-18 14:30:29

original

7796 Les gens l'ont consulté

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.

Quelles sont les méthodes d'alignement en CSS

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="mydiv">
        <span>测试</span>
</div>
<style type="text/css">
.mydiv{
    width:200px;
    height:100px;
    border:1px solid black;
    display:flex;
    align-items:center;
    justify-content:center;
}
</style>
</body>
</html>

Copier après la connexion

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!