中心的內容時使用的邊界圖像/邊框寬度

Question

我試圖創建一個樣式的按鈕，在其內部具有中心的單個字符。

我使用的「邊界圖像」和「邊框寬度」來創建一個按鈕，我可以延伸到更大的內容（即能力已經失去了在這個簡化的場景......）。

我的問題是這樣的：當按鈕很小時（具體來說，當按鈕超過2 *邊框寬度時），內容不居中。我已經試過像margin: 0 auto;「傳統」技術，但似乎並沒有爲具有任何的喜悅。使用dumb-button類沒有這些邊框屬性，我可以得到我想要的（見下文）

這恰恰說明了問題。我想在風格的按鈕爲中心的人物：

http://jsfiddle.net/rjmLy/

（在Chrome/Safari的作品，這是針對Webkit的唯一） （該主題的按鈕從http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo例子）

我的CSS如下：

.fancy-button { 
    border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat; 
    border-width: 0 14px; 
    box-sizing: border-box; 
    font-size: 16px; 
    height: 37px; 
    line-height:37px; 
    text-align: center; 
    margin: 0 auto; 
    width: 28px; 
} 
.centerme { 
    position:relative; 
    margin:0 auto; 
} 
.dumb-button { 
    font-size: 16px; 
    height: 37px; 
    line-height: 37px; 
    text-align: center; 
    width: 28px; 
    background-color: red; 
    margin: 0 auto; 
} 

的HTML看起來像這樣。該centerme類是企圖嘗試在舊形狀的頂部爲中心的新div。它不適合我。該dumb-button版本看起來是正確的（但沉悶...）

<div class="fancy-button">I</div> 
<div class="fancy-button">W</div> 
<div class="fancy-button"><div class="centerme">W</div></div> 

<div class="dumb-button">I</div> 
<div class="dumb-button">W</div> 
<div class="dumb-button"><div class="centerme">W</div></div> 

任何幫助將不勝感激。

Answer 1

您正在構建帶有CSS3 Sprite和border-image屬性的按鈕，其中按鈕左側的起點寬度爲14px，按鈕右側的起點寬度爲14px。

在你的CSS，你該按鈕的寬度設置爲28px：問題是，這個沒有留下餘地，你把在按鈕的中間，因此字母重疊到一部分的任何文字的邊界圖像。

爲了解決這個問題，你可以簡單地增加按鈕的width約42PX或更大。

.fancy-button { 
    border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat; 
    border-width: 0 14px; 
    box-sizing: border-box; 
    font-size: 16px; 
    height: 37px; 
    line-height:37px; 
    text-align: center; 
    margin: 0 auto; 
    width: 42px; 
} 

這裏的工作小提琴：http://jsfiddle.net/QYrzS/

但是，如果你真的想保持圖像的小 - 東西是有點困難。一種選擇是將每個按鈕的內容（單個字母）包裝在<div>中，然後手動設置每個按鈕的邊距。例如：

HTML

<div class="fancy-button"><div class="centerme">W</div></div> 

CSS

.centerme { 
    margin-left:-7px; 
} 

這是種哈克和將需要手動調節（因爲每個字母是不同的寬度）。

這裏的工作演示：http://jsfiddle.net/rjmLy/

注意，信i不居中。您需要爲包含該字母的個人<div>指定正確的邊距以便解決該問題。