À propos du problème du contrôle CSS du centrage horizontal DIV

Auteur：Eve Cole Date de mise à jour：2009-05-31 01:02:34

Concernant la question du contrôle CSS du centrage horizontal des DIV, je constate que de nombreux nouveaux arrivants sont confus. Je me souviens que la première fois que j'ai lu CSS, c'était un livre écrit par un étranger et qui parlait de l'utilisation du centrage.

marge gauche:auto;
marge droite:auto;

En fait, cela équivaut à :

marge : 0 automatique ;

Vous pouvez donc utiliser cette méthode, mais certaines personnes ont constaté qu'elle n'était pas centrée lors de l'utilisation d'IE. Il est recommandé de vérifier s'il vous manque une déclaration DTD.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Beaucoup de gens ont commis des erreurs similaires ! On peut également dire que cette méthode a fait ses preuves, mais elle ne fonctionne toujours pas dans certains cas. Il existe donc une deuxième méthode.

marge gauche : 50 % ;
gauche : -largeur/2 ;

La largeur ici n'est pas la largeur en CSS, mais la largeur de votre DIV. Par exemple, si votre div a une largeur de 768 px, vous devez définir left:-384px. Très bien, il existe déjà deux méthodes, dont on peut dire qu'elles ont résolu les problèmes que vous pourriez rencontrer.

Parfois, vous constaterez que ces deux éléments ne suffisent pas. Non compatible avec certains navigateurs. J'ai donc trouvé une troisième méthode, qui considère principalement IE, et qui se base sur la première méthode. Cela nécessite une mise en corps.

corps {text-align: center;}

De cette façon, il est également centré sous IE, mais cela pose un nouveau problème. Vous constatez que tout le texte de votre page est centré, ce qui n'est pas joli. C'est facile à résoudre, ajoutez simplement text-align: left; et d'autres paramètres d'ajustement à votre définition DIV.

Le texte ci-dessus n’est qu’une référence et un croquis d’après-dîner. Tout le monde peut y prêter attention dans le travail réel !