css - 带有图像背景和文本的按钮

Question

我有一个应用了图像背景的按钮。在按钮标签内有一些文本。为了使文本居中，我使用填充来定位它。但是每次我更改位置内的文本时都会受到影响，我需要再次修复填充。有没有办法让文本无论长度如何都居中？

我的代码:

 <button type="button" class="scroll_button" id="scroll">SIGN UP NOW</button>

.scroll_button{
background: url('../images/button_arrow.png') no-repeat 0 0;
padding: 24px 65px 45px 35px;
border: 0;
float: left;
margin-top: -100px;
color: white;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
}

Answer 1

您可以使用 text-align: center; 使文本在按钮内水平居中。设置高度和宽度使其成为您需要的大小，然后使用 line-height:/*unit*/; 将其垂直居中(其中 unit 等于元素的高度。

.scroll_button{
background: url('../images/button_arrow.png') no-repeat 0 0;
border: 0;
float: left;
margin-top: -100px;
color: white;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;

    /*centering. adjust to taste*/
    width: 150px;
    height: 50px;
    text-align: center;
}​

http://jsfiddle.net/Kyle_Sevenoaks/PN8U3/