圖像背景和文字按鈕

我有一個應用了圖像背景的按鈕。在按鈕標籤內有一些文字。爲了使文本居中，我使用填充來定位它。然而，每次我更改位置內的文本都會受到影響，我需要再次修復填充。不管長度如何，是否有一種保持文本居中的方法？圖像背景和文字按鈕

我的代碼：

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

來源

2012-09-21 Alex

你試過'文本align' – Patrick

'的text-align：？中心;' – knittl

做到這一點 - 。

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-21 10:45:00 Dipak

取出padding並替換爲：

text-align:center;

來源

2012-09-21 10:41:56

我指定的寬度和高度，添加文本對齊中心和刪除填充和工作謝謝:) – Alex

您可以使用text-align:center;水平居中，並line-height設置爲任何父容器的高度是中心文本垂直。

來源

2012-09-21 10:44:10 Patrick

您可以使用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-21 10:44:29 Kyle

圖像背景和文字按鈕

回答

相關問題