Centrage de texte L'utilisation de CSS ne fonctionne pas dans IE
-
09-06-2019 - |
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.
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