Centrage de texte Utilisation de CSS ne fonctionnant pas dans IE

Question

Je n'arrive pas à faire en sorte que le texte d'une table apparaisse centré dans IE.

Dans Firefox 2, 3 et tout Safari fonctionne bien, mais pour une raison quelconque, le texte ne semble pas centré dans IE 6 ou 7.

J'utilise:

h2 { 
    font: 300 12px "Helvetica", serif; 
    text-align: center; 
    text-transform: uppercase; 
} 

I J'ai également essayé d'ajouter margin-left:auto;, margin-right:auto et position:relative;

en vain.

Answer 1

La cellule de table a besoin du centre text-align: center.

Answer 2

Le text-align: center devrait être suffisant, puisque vous centrez le texte à l'intérieur d'un élément de bloc (h2) - ajuster les marges changera la position du bloc, pas le texte.

Je me demande si c'est juste que IE a une ficelle factice à cette déclaration font que vous avez là?

Answer 3

Utiliser l'alignement de texte: centre dans le div/td qui entoure le h2.

<table style = "width:400px;border:solid 1px;"> 
    <tr> 
     <td style = "text-align:center;"><h2>hi</h2></td> 
    </tr> 
</table> 

edit: wow, la communauté de stackoverflow est assez rapide!

Answer 4

La propriété text-align CSS doit être déclarée sur l'élément parent et non sur l'élément que vous essayez de centrer. IE utilise la propriété text-align: center pour centrer le texte. Firefox utilise margin: 0 auto et il doit être déclaré sur l'élément que vous essayez de centrer.

<div style="text-align: center"> 
    <h2 style="margin: 0 auto">Some text</h2> 
</div> 

Answer 5

est peut-être une faute de frappe, mais il vous manque un point-virgule ici:

margin-left:auto; margin-right:auto position:relative; 

devrait être:

margin-left:auto; margin-right:auto; position:relative; 

Si cela ne fonctionne pas, assurez-vous que l'élément que vous êtes essayer de centrer le texte a une certaine largeur. Essayez de définir la largeur à 100% et voir si quelque chose change.

Answer 6

Si vous pouvez/souhaitez utiliser flexbox, vous pouvez également utiliser ce qui suit.

display: flex; 
justify-content: center; 
align-items:center