Maison > interface Web > tutoriel CSS > le corps du texte

Pourquoi \'margin: auto\' ne centre-t-il pas les éléments verticalement en HTML ?

DDD
Libérer: 2024-11-02 10:28:02
original
999 Les gens l'ont consulté

Why Doesn't

Centrer les éléments verticalement avec "margin: auto"

Le problème :

En HTML, appliquer "margin: auto" " à un élément le centre généralement horizontalement dans son conteneur. Cependant, pourquoi ne se comporte-t-il pas de la même manière verticalement ?

Explication :

Selon les spécifications CSS (section 10.6.2 de CSS2.1), block- les éléments de niveau (par exemple, divs) sont positionnés verticalement de haut en bas sans centrage automatique. En effet, les marges verticales peuvent s'effondrer dans certaines conditions (par exemple, bordure sur l'élément parent).

Dans un scénario où un seul élément de niveau bloc avec marges automatiques existe dans un conteneur avec une hauteur automatique, son sommet et les marges inférieures deviennent nulles de toute façon. Cependant, lorsque plusieurs éléments au niveau du bloc ou des boîtes hors flux (par exemple, dégagement) sont présents, le comportement des marges automatiques devient ambigu, nécessitant un contrôle manuel.

Éléments et flotteurs en ligne :

Pour les éléments en ligne (y compris les inlines atomiques) et les flotteurs, les marges gauche et droite automatiques sont également remises à zéro. En effet, les boîtes de niveau en ligne sont disposées le long des boîtes de ligne et les flottants suivent des règles de disposition uniques.

Boîtes à position absolue :

Les marges automatiques se comportent différemment pour les zones à position absolue. boîtes. Puisqu'ils sont indépendants des autres éléments dans le même contexte de positionnement, ils peuvent être centrés verticalement à l'aide des marges supérieures et inférieures automatiques.

Flexbox :

Dans Flexbox, les marges automatiques comportez-vous encore une fois différemment. Les éléments flexibles connaissent les uns les autres, y compris leur présence ou leur absence. Cela permet un contrôle plus précis du comportement de la marge, y compris le centrage vertical.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal