Text Centering Mit CSS funktioniert nicht in IE

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

Frage

Ich habe Probleme von Text in einer Tabelle immer in IE zentriert erscheinen.

In Firefox 2, 3 und Safari alles gut funktionieren, aber aus irgendeinem Grunde, wird der Text nicht in IE zentriert erscheinen 6 oder 7

Ich bin mit: 

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

Ich habe auch versucht, das Hinzufügen margin-left:auto;, margin-right:auto und position:relative;

ohne Erfolg.

War es hilfreich?

Lösung

Die Tabellenzelle muss das text-align: center

.

Andere Tipps

CSS text-align Eigenschaft sollte auf dem übergeordneten Element deklariert werden und nicht das Element, das Sie Zentrum versuchen. IE verwendet text-align: center Immobilien zum Zentrum Text. Firefox verwendet margin:. 0 Auto und es hat auf dem Element deklariert werden Sie zum Zentrum versuchen 

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

Könnte ein Tippfehler sein, aber Sie vermissen ein Semikolon hier: 

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

Sollte sein: 

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

Wenn das nicht funktioniert, stellen Sie sicher, dass das Element, das Sie versuchen, den Text zu zentrieren auf einige Breite hat. Versuchen Sie, die Breite auf 100% und sehen, ob sich etwas ändert.

sollte die text-align: center ausreichend sein, da Sie den Text in einem Blockelement sind Zentrierung (h2) -. Die Ränder Einstellung wird die Position des Blocks ändern, nicht der Text

Ich frage mich, ob es nur, dass der IE einen Dummy-Spieß zu dieser font Erklärung mit hast du da?

Verwenden Sie text-align:. Zentrum in der div / td, die die h2 umgibt 

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

edit: wow, Stackoverflow-Community ist ziemlich schnell

Wenn Sie / wollen Flexbox verwenden, können Sie das folgende als auch verwendet werden. 

display: flex;
justify-content: center;
align-items:center
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top