简单的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

怎么样：

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

Answer 5

问题是按钮在浏览器中的呈现方式不同。在Firefox中，24px足以覆盖“A”字符允许的默认填充和空间并使其居中。在IE和Chrome中，它没有，因此它默认为覆盖左边距和文本所需的最小值而不会将其剪掉，但不会为按钮添加任何额外的宽度。

您可以增加宽度，或者如上所述，更改填充。如果你拿走显式宽度，它也应该有效。

Answer 6

您可以引导。如今，几乎所有网站都是使用引导程序开发的。您只需在HTML文件的head中添加引导程序class="btn btn-primary"。现在只需添加btn，您的按钮将看起来像一个普通按钮。即使您也可以在a标记上使用{{1}}类，它也会看起来像UI上的按钮。

Answer 7

padding: 0px解决了水平居中问题

而

设置line-height等于或小于按钮的高度可解决垂直对齐。

Answer 8

确保：

box-sizing : content-box;