html 文本位置中心,html – 元素内的文本位置

这是我目前的代码：

Read More

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,它在按钮上方的间距与它下面相同.

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

题：

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