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

正如您所看到的那样,.button通过使用css padding属性和对齐到中间的文本text-align: center.margin-top: 14px按钮上有一个按钮,按钮位于按钮上方.

但是,我发现通过使用padding按钮内部文本的元素,它会影响它周围的距离(在这种情况下,按钮下面的空间意味着14px,现在比它应该更大) ).

题:

有没有办法在.button不使用padding属性的情况下垂直对齐文本,因为我尝试了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

参考

• 行高

• 底部