В Firefox "A" отображается посередине, в Chrome/IE этого нет:
<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>
Обратите внимание, что следующие результаты имеют те же результаты:
<button type="button" style="width:24px;">A</button>
Изменить: теперь, кажется, исправлено в Chrome 5.0
Тестируя это в Chrome, вам нужно добавить
padding: 0px;
К CSS.
Обычно, ваш код должен работать...
Но вот способ центрировать текст в css:
.text
{
margin-left: auto;
margin-right: auto;
}
Это оказалось пуленепробиваемым для меня всякий раз, когда я хочу центрировать текст с помощью CSS.
Как насчет:
<input type="button" style="width:24px;" value="A"/>
Проблема заключается в том, что кнопки отображаются по-разному в браузерах. В Firefox 24px достаточно, чтобы охватить заполнение и пространство по умолчанию для вашего символа "A" и сосредоточить его. В IE и Chrome это не так, поэтому он по умолчанию имеет минимальное значение, необходимое для покрытия левого дополнения и текста без его отключения, но без добавления дополнительной ширины к кнопке.
Вы можете либо увеличить ширину, либо, как было предложено выше, изменить отступ. Если вы уберете явную ширину, она тоже будет работать.
Как более грубый метод, который я нашел, работал у меня:
Сначала оберните текст внутри кнопки в промежутке, а затем примените этот css к этому диапазону
var spanStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}
* выше настройки для встроенного стиля