html - 元素内的文本位置

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。

如您所见，.button 的文本通过使用 css 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属性(property)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