Html 内部文本位置<；a>；要素

这就是我当前的代码：

HTML:

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

.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%;
}

结果：

---

首先，这是所有包装的列有一个

边距底部：14px

。这将从柱及其下方的两条水平线创建间距。因此，如果用户希望同时取出按钮，则列中的文本仍会与下面两行相隔14px

如您所见，

按钮的文本通过使用css
padding
属性和
文本对齐：居中对齐
，对齐到中间。
按钮上有一个
边距顶部：14px
，按钮上方和下方的间距相同

然而，我发现，通过对按钮内的文本使用
padding
元素，它会影响按钮周围的距离（在本例中，按钮下方的空间是14px，现在比它应该的大）

问题：

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

.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%;
}

有没有一种方法可以在不使用padding属性的情况下垂直对齐
.button
中的文本，因为我已经尝试了垂直对齐、定位、浮动和其他一些方法，但是如果不更改框上方或下方的空间，则没有成功…最好的方法是什么，如果可能的话，使用图像替代的替代方法

任何帮助都将不胜感激
 您希望使用“行高”样式指定内部文本的行高。请记住，在某些情况下，这也可能会更改图元的高度（例如，当线条高度大于图元的最小高度时）。请参见：
将
行高度设置为与按钮的
高度相同的值
我认为您可以使用行高度属性。试试这个：

.button{
  line-height : 27px;
}

有两种方法可以做到这一点，但是如果没有javascript，这两种方法都需要绝对高度，尽管第二个选项相对于您设置的
填充



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

这是通过将文本行的高度设置为一个值来实现的，因为文本已经与行高度的中心进行了本机垂直对齐，所以可以获得所需的效果

添加行<代码>行高：27px到
。按钮{
将为您提供所需的结果





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

您的按钮元素将如下所示


您可以将这一行添加到css中：

#按钮文本{位置：相对；底部：-6.75px；}



参考资料




谢谢你的快速回复@zhujy_8833。你的回答非常有效！谢谢你的时间和努力@where srhys。你帮了我很大的忙。那里的工作很漂亮@MK_Dev，我还能说什么呢？你很有洞察力。