Центрирование текста Использование CSS не работает в IE

Question

У меня проблемы с отображением текста в таблице в IE.

В Firefox 2, 3 и Safari все работает нормально, но по некоторым причинам текст в IE 6 или 7 не отображается по центру.

Я использую:

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

Я также пытался добавить margin-left:auto;, margin-right:auto и position:relative;

безрезультатно.

Answer 1

CSS-свойство text-align должно быть объявлено в родительском элементе, а не в элементе, который вы пытаетесь центрировать. IE использует свойство text-align: center для центрирования текста. Firefox использует margin: 0 auto, и он должен быть объявлен для элемента, который вы пытаетесь центрировать.

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

Answer 2

Для ячейки таблицы требуется выравнивание текста: центр.

Answer 3

Возможно, это опечатка, но здесь вам не хватает точки с запятой:

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

Должно быть:

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

Если это не сработает, убедитесь, что элемент, на котором вы пытаетесь центрировать текст, имеет некоторую ширину. Попробуйте установить ширину на 100% и посмотрите, что изменится.

Answer 4

Если вы можете / хотите использовать flexbox, вы также можете использовать следующее.

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

Answer 5

Использовать выравнивание текста: центр в div / td, который окружает h2.

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

edit: вау, сообщество stackoverflow довольно быстрое!

Answer 6

text-align: center должно быть достаточно, так как вы центрируете текст внутри элемента блока (h2) - регулировка полей изменит положение блока, а не текста.

Интересно, это просто у IE есть фиктивная слюна в том объявлении font, которое у вас там есть?