Partage de compétences CSS avancées

Comment définir le centrage horizontal ?

Il existe deux situations : les éléments en ligne et les éléments de niveau bloc

1. Les éléments en ligne (tels que les images et le texte)

   div.textcenter{
   text-align:center;
   }
   <div class="textcenter">hello joe!</div>

2. Les éléments de niveau bloc

Le centrage horizontal des éléments de niveau bloc est divisé en deux types : les éléments de bloc à largeur fixe et les éléments de bloc à largeur non fixe

Éléments de bloc à largeur fixe (c'est-à-dire que la valeur de largeur des éléments de bloc est une valeur fixe) :

Cela peut être obtenu en définissant les marges gauche et droite des éléments de niveau bloc sur automatique comme suit

   div{
   border:1px solid red;
   width:500px;/*定宽*/
   margin:30px auto;/*margin-right margin-left为auto*/
   }
   <div>I am middle placed.</div>

Bloquer les éléments à largeur variable (c'est-à-dire que la largeur est incertaine, comme la navigation par pagination sur une page Web)

Il existe trois méthodes (couramment utilisées) pour obtenir un centrage horizontal des éléments à largeur variable :

La première méthode : utiliser la balise table

Utiliser l'adaptabilité de longueur de la balise table - --C'est-à-dire qu'elle ne définit pas sa longueur et n'utilise pas par défaut la longueur du corps de l'élément parent (la longueur du tableau est déterminée par la longueur du texte qu'il contient), il peut donc être considéré comme un élément de bloc à largeur fixe, puis utiliser la méthode de marge centrée sur bloc à largeur fixe, pour le centrer horizontalement

Étape 1 : Ajoutez une balise de tableau (comprenant

, , ) à l'extérieur de l'élément qui doit être centré.

Étape 2 : Définissez les "marges centrées gauche et droite" pour ce tableau (c'est la même méthode que l'élément de bloc à largeur fixe).

   table{
   margin: 0 auto;
   }
   ul{list-style:none;/*将小圆点去掉*/}
   li{float:left;display:inline;margin-right:5px;}
   <table>
       <tbody>
           <tr> <td>
            <ul>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                 <li><a href="#">3</a></li>
                 <li><a href="#">4</a></li>
             <ul>
            </td></tr>
       </tbody>
   </table>

La deuxième méthode : modifiez l'affichage de l'élément au niveau du bloc en type en ligne (défini sur "affichage de l'élément en ligne"), puis utilisez text-align:center pour obtenir l'effet de centrage. L'exemple suivant :

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

Par rapport à la première méthode, il n'est pas nécessaire d'ajouter une balise non sémantique (table). Cependant, puisque li est considéré comme un élément en ligne, les attributs tels que la hauteur et la largeur ne peuvent pas le faire. être défini pour cela

La troisième méthode : obtenir un centrage horizontal en définissant float pour l'élément parent, puis en définissant position:relative et left:50% pour l'élément parent, et en définissant position:relative et left: -50 % pour l'élément enfant.

   .container{
   float:left;
   position:relative;
   left:50%;
   }
   .container ul{
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:-50%;
   }
   .container li{
   float:left;
   display:inline;
   margin-right:8px;
   }
   <div class="container">
     <ul>
         <li><a href="#">1</a></li>
         <li><a href="#">2</a></li>
         <li><a href="#">3</a></li>
         <li><a href="#">4</a></li>
     </ul>
   </div>

2. Comment définir le centrage vertical ?

est divisé en deux situations, une seule ligne de texte avec une hauteur déterminée de l'élément parent et un texte multiligne avec une hauteur déterminée de l'élément parent.

Texte sur une seule ligne : le centrage vertical est obtenu en définissant la hauteur de ligne pour qu'elle soit cohérente avec la hauteur

La différence entre les valeurs calculées de la hauteur de ligne et de la police -size devient " interligne ". Divisez-le en deux moitiés et ajoutez-les en haut et en bas d'une ligne de texte.

La même hauteur de ligne de texte et la même hauteur de bloc présentent un inconvénient : lorsque la longueur du contenu du texte est supérieure à la largeur du bloc, le contenu tombera hors du bloc.

.container{
    line-height:100px;
    height:100px;
    background:purple;
}
<div class="container"><h1>Hello World!</div>

Mais cette méthode présente un inconvénient : lorsque la longueur du texte est plus longue que la largeur du bloc, le contenu sort du bloc.

Texte multiligne :

Il existe deux méthodes :

Utilisez la balise table et utilisez vertical-align:middle (notez que la balise td a une balise verticale -align set by default :middle

Nous n'avons donc pas besoin de le définir manuellement

table td{
height:500px;
background:#purple;
}
<table>
    <tbody>
    <tr><td>
    <div>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    I am centered<br>
    </div>
    </tr></tr>
    </tbody>
</table>

La dernière astuce consiste à changer implicitement l'affichage attribut. Si vous définissez l'une des deux instructions suivantes pour un élément :

float:right ou float:right

position:absolute

le type d'affichage de l'élément sera changer automatiquement pour afficher : Inline-block À ce stade, vous pouvez définir la largeur et la hauteur de l'élément, par exemple

<style type="text/css">
.container a{
    position:absolute;
    width:100px;
    height:50px;
    background:purple;
}
</style>
<body>
    <div class="container">
      <a href="#">
          I am CEO,you son of bitch.
      </a>
    </div>
</body>

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!