html - 我有一个带有文本的按钮，但文本未在按钮中居中。它不是在中间，而是在按钮的左上角

Question

那么如何让文本位于按钮中间呢？

<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>

Answer 1

您可以添加以下内容:

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

在你的类(class)。

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

这是 CSS 中的:

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

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

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