communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > css:margin:0 la solution automatique ne peut pas être centrée sous ie8

css:margin:0 la solution automatique ne peut pas être centrée sous ie8

黄舟
Libérer： 2017-07-21 13:43:54
original
2036 Les gens l'ont consulté

Aujourd'hui, j'ai écrit un div, en utilisant margin:0 auto; pour définir ses attributs et le centrer, mais il s'est avéré invalide.
Au début, j'ai pensé qu'il s'agissait d'un conflit de code dans le css. Je l'ai vérifié plusieurs fois et j'ai trouvé que c'était OK. Ensuite, je l'ai testé avec Firefox et Google Chrome et j'ai trouvé qu'il était centré. . .
Cela semble être un problème de compatibilité du navigateur. Je me suis soudainement rappelé que j'utilise Win7 et qu'IE a été mis à niveau vers IE8. Il semble que le problème soit la compatibilité d'IE8. Baidu. . . .

La solution est copiée ci-dessous :
Pour réaliser le centrage sous IE6, 7, et Firefox, margin: auto est généralement utilisé pour y parvenir, mais sous IE8, cela ne suffit pas. Deux solutions sont désormais proposées :

Méthode 1 (recommandée) :

Dans un premier temps, il faut paramétrer le type de document en haut de la page : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition al.dtd">
Copier après la connexion

et ajouter dans la tête : 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 即可！
Copier après la connexion


Méthode 2 :

Paramètres du corps {text-align:center;width:100%;}
Inclure tous les divs dans

, le wrap est défini comme suit : 

　#wrap    
　{ 
　text-align:left; 
　width:***;  
　margin:0 
　auto; 
　 }
Copier après la connexion

Et ajoutez en tête : 

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
Copier après la connexion

C'est tout !

Méthode 3 :

Utilisez

pour remplacer le calque d'enveloppement dans le second.

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：
auto margin
source：php.cn
Article précédent：Solution à la marge invalide : 0 auto en CSS Article suivant：Explication détaillée d'exemples d'ombre extérieure et de lueur extérieure en CSS3 (image)
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
Derniers articles par auteur
Derniers numéros
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Le rembourrage du parent ignoré par l'enfant en position collante Comment empêcher les éléments collants de passer derrière le collecteur ? L'extrait de cod...
Depuis 2024-04-06 11:42:51
0
1
338
Pourquoi un enfant de grille avec une largeur fixe et une largeur maximale de 90 % déborde-t-il de la piste de la grille ? Question : Ma question est très simple, je veux savoir pourquoi l'élément .header déborde ...
Depuis 2024-04-05 14:33:39
0
1
1426
Comment supprimer l'espace sous chaque ligne du tableau Tic-Tac-Toe dans Next.js en utilisant CSS ? Pourquoi y a-t-il un espace sous chaque ligne ? (CSS) J'essaie de créer une application Ne...
Depuis 2024-04-05 11:39:02
0
1
1431
Méthodes CSS et HTML pour déplacer les paragraphes vers la gauche sur les écrans de taille mobile Il semble parfait sur un écran d'ordinateur 16:9 normal, avec du texte à gauche et des ima...
Depuis 2024-04-04 20:25:22
0
1
330
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal