2010-05-30 4 views
3

J'essaie de centrer le contenu d'un div de sorte que l'affichage est correct dans IE 5,6,7 et 8, ainsi que FF.Centrage dans IE5/6/7/8, et FF

<div id="YoutubeClip"> 
    <h3>Subscribe on YouTube!</h3><br> 
    <ul class="gallery clearfix"><a href="http://www.someyoutubevideo.com" rel="prettyPhoto" title="Some youtube title"><img alt="some youtube title" src="youtube clip image" border="0"></a></ul> 
    Some youtube title 
</div> 

Mon CSS est simple:

text-align: center 

Comme prévu, cette affiche l'image et le texte centré sur FF.

Dans IE5, l'image est justifiée à gauche. Le texte est également justifié à gauche, avec un seul mot sur une ligne, comme ce qui suit:

Il
apparaît
comme
cela.

IE 6 a le même problème que ci-dessus.

IE 7 semble avoir le même problème, mais lorsque je place une bordure autour de la div, le contenu déborde de la bordure.

L'affichage apparaît correct dans IE8

Toute aide dans ce serait génial. J'essaie d'apprendre le CSS mieux et je n'ai pas encore réussi à comprendre les subtilités de ce problème.

+3

Postez le CSS que vous avez utilisé trop, s'il vous plaît. –

+2

Pourquoi avez-vous pris la peine de tester IE5? Avez-vous une raison sérieuse de le faire? – FelipeAls

Répondre

3

Lorsque vous avez dit "Il semble que ça" il n'y avait rien à regarder.

La première chose que je ferais est de valider votre code, comme la balise <ul> vous avez utilisé de manière incorrecte:

http://validator.w3.org/

L'objectif principal de valider votre code est pour la compatibilité du navigateur.

Je ne peux pas voir le CSS que vous utilisez, et je n'ai jamais testé avec IE5, mais je voudrais essayer d'utiliser

margin: 0 auto

pour centrer votre divs. Ce sera probablement beaucoup plus efficace.

Hope qui aide :)

+0

Vous pouvez également ajouter 'align = "center"' à l'étiquette div elle-même. –

0

vous devez utiliser text-align:center pour ul et h3. si vous pouvez poster css que cela peut être mieux.

0

Pour aligner un élément de niveau bloc dans le centre, vous avez besoin:

margin-left: auto; 
margin-right: auto; 
0
#YoutubeClip { 
margin: 0 auto 0 auto; 
} 

0 = haut et en bas auto = gauche et à droite

ayant ceci sur la div qui enveloppe la le contenu à l'intérieur doit centrer le bloc entier et le maintenir centré même si le navigateur des utilisateurs n'est pas agrandi ou redimensionné.

Si vous cherchez à centrer le contenu dans le bloc et non le bloc de son auto

text-align: center; doit être ajouté à la h3 et d'autres balises #YoutubeClip

est ce que vous serez à la recherche

Je suggère d'ajouter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> au début de votre fichier html avant de tenter de valider de sorte que vous ayez une base solide pour commencer la validation.

En ce qui concerne votre <ul class="">, il peut être changé en <div class=""> si vous prévoyez de l'utiliser comme vous le montrez dans votre exemple de code. Sinon, vous devrez ajouter <li></li> autour de son contenu (pour chaque ligne séparée).

EX:

<ul> 
    <li>content goes here</li> 
    <li>more content</li> 
</ul>