1

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

我的代码：

 <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;
}
4

4 回答 4

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/

于 2012-09-21T10:44:29.197 回答
0

删除padding并替换为：

text-align:center;
于 2012-09-21T10:41:56.640 回答
0

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

于 2012-09-21T10:44:10.837 回答
0

做这个 -

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

于 2012-09-21T10:45:00.583 回答