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

Question

В 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

Answer 1

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

padding: 0px;

К CSS.

Answer 2

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

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

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

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

Answer 3

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

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

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

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

Answer 4

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

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

Answer 5

А как же:

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