Центрирование текста с помощью 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

Ячейку таблицы необходимо выровнять по тексту:центр.

Answer 2

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

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

Answer 3

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

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

Должно быть:

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

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

Answer 4

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

Интересно, может быть, дело просто в том, что у IE есть пустышка - плюнь на это font декларация у вас там есть?

Answer 5

Используйте text-align:center в div / td, который окружает h2.

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

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

Answer 6

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

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