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

Question

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

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

Я использую:

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

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

не напрасно.

Answer 1

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

Может быть опечатка, но вам не хватает запятой здесь:

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

Должно быть:

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

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

Answer 6

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

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