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*/;将其垂直居中（其中单位等于元素的高度。

.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/

Answer 2

删除padding并替换为：

text-align:center;

Answer 3

您可以使用text-align:center;水平居中，line-height设置为父容器的高度，使文本垂直居中。

Answer 4

这样做 -

padding: 24px 0px; width: 250px; text-align: center;

.scroll_button{
background: red;
padding: 24px 0px; width: 250px; text-align: center;
border: 0;
float: left;
color: white;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
}

JSFiddle

按钮有图象背景和文本

4 个答案: