Простой CSS: текст не будет центрироваться кнопкой

В 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

Ответы

Ответ 1

Тестируя это в Chrome, вам нужно добавить

padding: 0px;

К CSS.

Ответ 2

Обычно, ваш код должен работать...

Но вот способ центрировать текст в css:

.text
{
    margin-left: auto;
    margin-right: auto;
}

Это оказалось пуленепробиваемым для меня всякий раз, когда я хочу центрировать текст с помощью CSS.

Ответ 3

Как насчет:

<input type="button" style="width:24px;" value="A"/>

Ответ 4

Проблема заключается в том, что кнопки отображаются по-разному в браузерах. В Firefox 24px достаточно, чтобы охватить заполнение и пространство по умолчанию для вашего символа "A" и сосредоточить его. В IE и Chrome это не так, поэтому он по умолчанию имеет минимальное значение, необходимое для покрытия левого дополнения и текста без его отключения, но без добавления дополнительной ширины к кнопке.

Вы можете либо увеличить ширину, либо, как было предложено выше, изменить отступ. Если вы уберете явную ширину, она тоже будет работать.

Ответ 5

Как более грубый метод, который я нашел, работал у меня:

Сначала оберните текст внутри кнопки в промежутке, а затем примените этот css к этому диапазону

var spanStyle = {
      position: "absolute",
      top: "50%",
      left: "50%",
      transform: "translate(-50%, -50%)"
    }

* выше настройки для встроенного стиля