这是我目前的代码：
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.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,它在按钮上方的间距与它下面相同.
但是,我发现通过使用填充元素作为按钮内部的文本,它会影响它周围的距离(在这种情况下,按钮下面的空间意味着14px,现在比它应该更大)是).
题：
有没有办法在不使用padding属性的情况下垂直对齐.button中的文本,因为我尝试了vertical-align,position,float和其他一些但是如果不改变框上方或下方的空间就没有成功…什么是最好的方法,如果可能的话,另一种方法是使用图像代替？
任何帮助将不胜感激. http://jsfiddle.net/9xpfY/
解决方法
有两种方法可以做到这一点,但是没有javascript,这两种方法都需要绝对高度,尽管第二个选项相对于你设置的填充有效.
>首先,一个明显的选择是使用线高.
这可以通过将文本行的高度设置为值来实现,并且因为文本已经本身垂直对齐到行高的中心,所以您可以获得所需的效果.
添加线高：27px; to .button {会给你你想要的结果.
>第二种方法是将文本包含在span标记中的元素内,并将bottom属性设置为bottom：-6.75px;
你的按钮元素看起来像这样
< a class =“button”href =“#”>< span id =“buttontext”>阅读更多< / span>< / a>
你会把这行添加到你的CSS：
#buttontext {position：relative;底部：-6.75px;}
参考
