Центрирование текста с помощью CSS не работает в IE
У меня возникают проблемы с отображением текста в таблице по центру 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;
но безрезультатно.
Ответы 6
Ячейке таблицы требуется выравнивание текста: центр.
text-align: center должно быть достаточно, поскольку вы центрируете текст внутри элемента блока (h2) - настройка полей изменит положение блока, а не текста.
Интересно, это просто у IE есть пустышка для той декларации font, которая у вас там?
Используйте 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>
edit: вау, сообщество stackoverflow работает довольно быстро!
Свойство 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>
Возможно, это опечатка, но здесь отсутствует точка с запятой:
margin-left:auto; margin-right:auto position:relative;
Должно быть:
margin-left:auto; margin-right:auto; position:relative;
Если это не сработает, убедитесь, что элемент, на котором вы пытаетесь центрировать текст, имеет некоторую ширину. Попробуйте установить ширину на 100% и посмотрите, не изменится ли что-нибудь.
Если вы можете / хотите использовать flexbox, вы также можете использовать следующее.
display: flex;
justify-content: center;
align-items:center