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

Comment utiliser des valeurs de marge négatives pour ajuster la position centrale en CSS

不言
Libérer: 2018-06-26 10:57:00
original
1805 Les gens l'ont consulté

Cet article présente principalement la méthode d'utilisation de valeurs de marge négatives pour ajuster la position centrale en CSS. L'article mentionne également certains aspects remarquables de cette méthode courante. Les amis dans le besoin peuvent se référer à

Ceci peut-être. la méthode de centrage la plus courante. Si vous connaissez la taille de chaque élément, définissez une valeur de marge négative égale à la moitié de la largeur et de la hauteur (si vous n'utilisez pas le style box-sizing: border-box, vous devez également ajouter une valeur de remplissage), puis faites correspondre top : 50 % ; gauche : 50 % ; le style centrera l'élément de bloc.
2015715161801771.jpg (607×399)

Il est à noter que c'est la seule façon de travailler sous IE6-7 comme prévu.

.is-Negative {       
        width: 300px;       
        height: 200px;       
        padding: 20px;       
        position: absolute;       
        top: 50%; left: 50%;       
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
Copier après la connexion

Avantages :

La compatibilité du navigateur est très bonne, prend même en charge IE6-7
Nécessite très peu de codage

Notez également :

Il s'agit d'une méthode non réactive. Vous ne pouvez pas utiliser de tailles en pourcentage, ni définir les valeurs maximales et minimales de min-/max-.
Le contenu peut dépasser le conteneur
Vous devez réserver de l'espace pour le remplissage, ou vous devez utiliser le style box-sizing: border-box.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser l'attribut position:fixed pour centrer un DIV

Comment centrer un CSS fenêtre contextuelle

Analyse du flotteur et de la position CSS

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!

Étiquettes associées:
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