centrer un DIV en utilisant CSS. J'ai été intrigué pendant longtemps

-2

Ok, ce n'est pas vraiment une question, plus une solution à une question que j'étais sur le point de demander ...centrer un DIV en utilisant CSS. J'ai été intrigué pendant longtemps

Ce que j'essayais de faire était simplement centrer un div en utilisant CSS. et je ne pouvais pas comprendre. Cela n'a tout simplement pas fonctionné. J'ai utilisé le code suivant:

<style type="text/css"> 
<!-- 
div.test { 
    width: 300px; 
    margin-right: auto; 
    margin-left: auto; 
    border: 1px solid black; 
} 

--> 
</style> 
<div class='test'> 
hello 
</div>

Cela ne fonctionne pas sur IE, il l'a fait sur quoi que ce soit d'autre (y compris mon iPhone, ce qui est très frustrant). La div est simplement restée alignée sur la droite.

Maintenant, pour la solution (simple!), Qui m'a coûté beaucoup de temps, et que je n'ai pas pu localiser à la recherche du problème dans google. Simly ajouter le doctype, et voilas !:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

Qui l'a fixé. Ça m'a coûté quelques heures très frustrantes. J'espère que cela peut aider certains d'entre vous. J'ai aussi cherché sur stackoverflow et j'ai trouvé des solutions sales.

Source

2010-10-18 patrick

alors quelle est la question? – Ross

donnant généralement text-align: center à la div parente résout le problème dans IE. – naiquevin

Ce n'est pas une DTD recommandée non plus: http://www.w3.org/QA/2002/04/valid-dtd-list.html – Quentin

Oui, si vous omettez la déclaration <!DOCTYPE> vous obtenez le redouté Quirks Mode, où IE essaie de se comporter autant que possible comme IE5, pour des raisons de compatibilité.

Ne pas prendre en charge margin-left/right: auto est l'un des bogues CSS IE5 les plus en vue, mais pas le seul ou même le pire. Quirks Mode Le rendu CSS est un énorme casse-tête que vous devriez éviter à tout prix. Toujours inclure un <!DOCTYPE> dans chaque document HTML.

Source

2010-10-18 10:40:21 bobince

No déclaration signifie beaucoup de bugs, bugs, bugs et l'introduction de nombreux problèmes de compatibilité entre les navigateurs, comme par exemple [le modèle de boîte] (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) problème. Même avec un doctype, il y a assez de différences pour casser votre cerveau avec ... –

centrer un DIV en utilisant CSS. J'ai été intrigué pendant longtemps

Répondre

Questions connexes