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: 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 に答える
0

を削除して、次のpaddingものに置き換えます。

text-align:center;
于 2012-09-21T10:41:56.640 に答える
0

を使用text-align:center;して水平方向に中央揃えline-heightし、親コンテナーの高さに合わせてテキストを垂直方向に中央揃えすることができます。

于 2012-09-21T10:44:10.837 に答える