如何在跨度中填充文本，但不填充背景图像

Question

我有一个带有按钮背景图像和文本的 SPAN。然而，文本位于按钮的顶部，而我希望它垂直居中。我试图用填充来调整它，但是背景图像随之移动......

html代码：

<span class="button" style="BACKGROUND-IMAGE: url('images/button.gif'); HEIGHT: 50px; PADDING: 15px 10px 0px 0px; WIDTH: 50px">button text</span>

提前谢谢，我感觉我忽略了一些简单的东西......

Answer 1

将此添加到您的 CSS 中：

line-height: 50px;
display: inline-block;
padding: 0 10px;

您可能需要调整内边距，但将行高设置为按钮本身的高度会使其内容垂直居中。