Centre d'annulation CSS

CSS Uncentering

CSS est un élément indispensable de la conception Web. Il peut contrôler différents styles de page, notamment les polices, les tailles, les couleurs, les mises en page, etc. Parmi eux, le centrage est un effet de composition courant, qui peut centrer les éléments horizontalement ou verticalement au centre de l'écran, rendant la page plus belle. Cependant, dans certains cas, nous devons décentrer un élément, et cet article explique comment y parvenir.

Annuler le centrage horizontal

Pour annuler l'effet de centrage horizontal d'un élément, il faut d'abord comprendre son principe de mise en œuvre. Habituellement, nous utilisons l'attribut margin pour obtenir un centrage horizontal et définissons les valeurs de marge gauche et droite sur auto. Par exemple, le code suivant peut centrer un élément div horizontalement :

div {
  width: 300px;
  margin: 0 auto;
}

Cependant, que se passe-t-il si l'on veut annuler l'effet de centrage horizontal de cet élément ? Il existe deux façons de procéder. La première consiste à définir les valeurs des marges gauche et droite sur des valeurs spécifiques, par exemple :

div {
  width: 300px;
  margin: 0 50px;
}

Le code ci-dessus déplace l'élément div vers la droite de 50 pixels, annulant ainsi son effet de centrage horizontal. Les valeurs spécifiques peuvent être ajustées en fonction de la situation réelle pour obtenir l'effet souhaité.

Une autre façon consiste à utiliser la disposition flexible. La disposition flexible peut contrôler avec précision la disposition des éléments, y compris des effets tels que le centrage et l'espacement. Nous pouvons contrôler la position horizontale de l'élément en définissant l'attribut display de l'élément parent sur flex, puis en utilisant l'attribut justifier-content. Par exemple, le code suivant peut centrer un élément div horizontalement vers la gauche :

.container {
  display: flex;
  justify-content: flex-start;
}

div {
  width: 300px;
}

Annuler le centrage vertical

La méthode de mise en œuvre du centrage vertical est similaire au centrage horizontal, en utilisant généralement le code suivant :

div {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Le code ci-dessus centrera un élément div verticalement dans l'élément parent et centré horizontalement. Si nous voulons uniquement annuler l'effet de centrage vertical, nous pouvons définir l'attribut align-items sur une autre valeur, telle que :

div {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

Le code ci-dessus déplace l'élément div vers le haut, annulant ainsi son effet de centrage vertical. De même, des valeurs spécifiques peuvent être ajustées en fonction des conditions réelles pour obtenir l'effet souhaité.

Résumé

CSS peut obtenir divers effets de mise en page tels que le centrage et le décentrage. Ces effets peuvent rendre la page plus belle et plus facile à lire. Lorsque nous devons annuler l'effet de centrage d'un élément, nous pouvons le faire en ajustant la valeur de la marge ou en utilisant la disposition flexible. Dans le même temps, nous devons également utiliser raisonnablement les techniques ci-dessus pour que la page présente le meilleur effet de mise en page.

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!