<a> element</a>内的文字位置

Question

这是我目前的代码：

HTML：

<a class="button" href="#">Read More</a>

CSS：

.button {
background:url('../images/btn_bg.jpg') repeat scroll 0% 0%;
font: 12px Helvetica, Arial, sans-serif;
color: #FFF;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
text-decoration: none;

cursor: pointer;
border: none;

min-width: 87px;
min-height: 29px;

float: right;
margin-top: 14px;

padding-top: 4.25px;

transition: all 0.5s ease 0s;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
}

.button:hover {
background: url('../images/btn_over.jpg') repeat scroll 0% 0%;
}

结果：

---

首先，包含此内容的列包含margin-bottom: 14px。这将创建与列之间的间距以及列下方的两条水平线。如果用户想要将按钮全部放在一起，则情况就是如此，列中的文本仍将与下面的两行相差14px。

通过使用css .button属性和padding，您可以看到text-align: center的文字与中间对齐。 按钮上有一个margin-top: 14px，它在按钮上方的间距与其下方相同。

然而，我发现通过对按钮内的文本使用padding元素，它会影响它周围的距离（在这种情况下，按钮下面的空间意味着14px，现在比它应该的更大）。

问题：

有没有办法在不使用padding属性的情况下垂直对齐.button中的文本，因为我尝试了vertical-align，position，float和其他几个但是如果不改变上面或下面的空间就没有成功盒子......最好的方法是什么，如果可能的话，另一种方法是改用图像？

非常感谢任何帮助。 http://jsfiddle.net/9xpfY/

Answer 1

有两种方法可以做到这一点，但是没有javascript，这两种方法都需要绝对高度，尽管第二种方法相对于你设置的padding有效。

---

• 首先，一个明显的选择是使用线高。

  这可以通过将文本行的高度设置为一个值来实现，并且由于文本已经原生地垂直对齐到行高的中心，因此您可以获得所需的效果。

  将行line-height : 27px;添加到.button {会为您提供所需的结果。

  jsfiddle

---

• 第二种方法是将文本包含在span标记中的元素内，并将bottom属性设置为bottom: -6.75px;

  你的按钮元素看起来像这样

  <a class="button" href="#"><span id="buttontext">Read More</span></a>

  你可以将这一行添加到你的css：

  #buttontext {position: relative; bottom: -6.75px;}

  jsfiddle

<强>参考

• line-height

• bottom

Answer 2

您想使用“line-height”样式指定内部文本的行高。请记住，在某些情况下，这也可能会改变元素的高度（例如，当行高超过元素的最小高度时）。请参阅：http://jsfiddle.net/VvnhJ/

Answer 3

将line-height设置为与按钮的height

相同的值

Answer 4

我认为您可以做的一件事是使用line-height属性。试试这个：

.button{
  line-height : 27px;
}