Centrage de texte L'utilisation de CSS ne fonctionne pas dans IE

StackOverflow https://stackoverflow.com/questions/68610

Question

Je ne parviens pas à faire apparaître un texte dans un tableau centré dans IE.

Sous Firefox 2 et Safari, tout fonctionne correctement, mais pour une raison quelconque, le texte n'apparaît pas centré dans IE 6 ou 7.

J'utilise: 

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

J'ai également essayé d'ajouter marge-gauche: auto; , marge-droite: auto et position: relative;

en vain.

Était-ce utile?

La solution

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

Autres conseils

La propriété CSS text-align 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 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>

Peut-être une faute de frappe, mais il 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 sur lequel vous essayez de centrer le texte a une certaine largeur. Essayez de régler la largeur à 100% et voyez si quelque chose change.

Le text-align: center devrait suffire, car vous centrez le texte dans un élément de bloc (h2) - le réglage des marges modifiera la position du bloc et non le texte.

Je me demande si c'est simplement qu'IE a un faux cracheur à cette déclaration de police que vous avez là?

Utilisez text-align: 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!

Si vous pouvez / voulez utiliser flexbox, vous pouvez également utiliser les éléments suivants. 

display: flex;
justify-content: center;
align-items:center
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top