I have a situation where I have a SPAN with a background image of a button, with text. The text is however on top of the button, while I want it to be vertically centered. I tried to adjust it with padding, but then the background image shifts along...
我有一种情况，我有一个带有文本的按钮背景图像的SPAN。然而，文本位于按钮的顶部，而我希望它是垂直居中的。我尝试用填充调整它，但随后背景图像移动...
The html code:
HTML代码：
<span class="button" style="BACKGROUND-IMAGE: url('images/button.gif'); HEIGHT: 50px; PADDING: 15px 10px 0px 0px; WIDTH: 50px">button text</span>
Thanks in advance, I have the feeling that I am overlooking something simple...
在此先感谢，我觉得我忽略了一些简单的事情......
1 个解决方案
#1
3
Add this to your CSS:
将其添加到您的CSS：
line-height: 50px;
display: inline-block;
padding: 0 10px;
You may need to adjust your padding, but setting the line height to the height of the button itself will center its content vertically.
您可能需要调整填充，但将线条高度设置为按钮本身的高度将使其内容垂直居中。
#1
3
Add this to your CSS:
将其添加到您的CSS：
line-height: 50px;
display: inline-block;
padding: 0 10px;
You may need to adjust your padding, but setting the line height to the height of the button itself will center its content vertically.
您可能需要调整填充，但将线条高度设置为按钮本身的高度将使其内容垂直居中。