我有一个带有文本的按钮，但文本不在按钮中居中。它不在中间，而是更多在按钮的左上角答案

【问题标题】：I have a button with text in it, but the text is not centered in the button. It is not in the middle, but more in the top left corner of the button我有一个带有文本的按钮，但文本不在按钮中居中。它不在中间，而是更多在按钮的左上角
【发布时间】：2014-07-25 13:29:44
【问题描述】：

那么如何让文本出现在按钮的中间呢？

<style type="text/css">
a {
text-decoration: none;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
background-color: #CC4A31;
color: #444;
border-radius: 9px;
position: absolute;
top: 16px;
left: 40px;
height: 50px;
width: 125px;
webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
</style>


<a href="">GameTrade</a>

【问题讨论】：

那不是一个按钮，那是一个链接。

标签： html css button text

【解决方案1】：

用户文本居中水平居中并使用填充垂直居中（而不是指定高度）。如果你需要一个特定的高度，height = padding*2 + font-size

display: block;
padding: 20px 0px;
width: 125px;
text-align:center;
line-height:1em;

Fiddle

【讨论】：

这个解决方案有效，但是如果宽度/高度是链接样式的要求呢？然后就不行了
编辑更好地适应这个
从哪里得到规则高度 = 填充 * 2 + 字体大小？在您自己的 Fiddle 示例中，您可以看到此规则不准确，因为您的 padding 为 20，font-size 为 14，但高度是 56 而不是 54。

【解决方案2】：

您可以添加以下内容：

text-align: center;
line-height: 50px;

在你的课堂上。

如果添加相同的高度和行高，文本将始终居中。

那是在 CSS 中：

height: 'x' px;
line-height: 'x' px;

您可以在这里看到不同尺寸的。观察文本如何始终居中，尽管大小不同。

http://jsfiddle.net/ywdHq/1/

【讨论】：

【解决方案3】：

试试：

text-align: center;
line-height: 50px;

这应该使您的 <a> 元素中的文本居中。对于任何宽度。如果更改按钮的高度，请将line-height 更改为相同的值。

工作小提琴：http://jsfiddle.net/LKesU/

【讨论】：