简单的 CSS：文本不会在按钮中居中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2883373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple CSS: Text won't center in a button
提问by gbhall
In Firefox 'A' shows in the middle, on Chrome/IE it doesn't:
在 Firefox 中，'A' 显示在中间，在 Chrome/IE 上它没有：
<button type="button" style="width:24px; text-align:center; vertical-align:middle">A</button>
Note the following has the same results:
请注意，以下结果相同：
<button type="button" style="width:24px;">A</button>
Edit: Now seems to be fixed in Chrome 5.0
编辑：现在似乎已在 Chrome 5.0 中修复
回答by Tejs
Testing this in Chrome, you need to add
在 Chrome 中测试这个，你需要添加
padding: 0px;
To the CSS.
到 CSS。
回答by Zwik
Usualy, your code should work...
通常，您的代码应该可以工作...
But here is a way to center text in css:
但这里有一种在 css 中居中文本的方法：
.text
{
margin-left: auto;
margin-right: auto;
}
This has proved to be bulletproof to me whenever I want to center text with css.
事实证明，每当我想用 css 居中文本时，这对我来说都是防弹的。
回答by RadDog25
As a more brute force method that I found worked for me:
作为我发现对我有用的更暴力的方法：
First wrap the text inside the button in a span, and then apply this css to that span
首先将按钮内的文本包裹在一个跨度中，然后将此 css 应用于该跨度
var spanStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
}
*above setup for inline styling
*以上内联样式设置
回答by Abhishek
You can bootstrap. Now a days, almost all websites are developed using bootstrap. You can simply add bootstrap linkin headof html file. Now simply add class="btn btn-primary"and your button will look like a normal button. Even you can use btnclass on atag as well, it will look like button on UI.
你可以自举。现在，几乎所有网站都是使用引导程序开发的。您可以简单地link在headhtml 文件中添加引导程序。现在只需添加class="btn btn-primary"，您的按钮就会看起来像一个普通按钮。即使你也可以btn在a标签上使用类，它看起来就像 UI 上的按钮。
回答by Ramesh Maharjan
padding: 0pxsolves the horizontal centering
whereas,
setting line-heightequal to or less than the height of the button solves the vertical alignment.
padding: 0px解决水平居中，
而
设置line-height等于或小于按钮的高度解决垂直对齐。
回答by TheQ
The problem is that buttons render differently across browsers. In Firefox, 24px is sufficient to cover the default padding and space allowed for your "A" character and center it. In IE and Chrome, it does not, so it defaults to the minimum value needed to cover the left padding and the text without cutting it off, but without adding any additional width to the button.
问题是按钮在浏览器中的呈现方式不同。在 Firefox 中，24px 足以覆盖“A”字符允许的默认填充和空间并将其居中。在 IE 和 Chrome 中，它没有，因此它默认为覆盖左侧填充和文本所需的最小值，而不会将其切断，但不会向按钮添加任何额外的宽度。
You can either increase the width, or as suggested above, alter the padding. If you take away the explicit width, it should work too.
您可以增加宽度，或者按照上面的建议，更改填充。如果您去掉显式宽度，它也应该起作用。
回答by Gabe
What about:
关于什么：
<input type="button" style="width:24px;" value="A"/>
