水平對齊文字和：內按鈕

圖像後，我有一個按鈕：<button className="my-button">Deposit</button>水平對齊文字和：內按鈕

除了"Deposit"文本它應該有一個存款的畫面。我用&:after把它加上。它看起來像：

問題：得到下面的結果。我可以將deposit.png對齊到合適的位置，但我不能移動按鈕文字。

問題：如何使內部按鈕Deposit文字和deposit.png無需額外包裝（只用CSS）？

我的CSS：

button.my-button { 
    position: relative; 
    width: 125px; 
    height: 40px; 
    background: none; 
    border: 2px solid fade(white, 70); 
    border-radius: 4px; 
    font-family: Proxima Nova Soft semibold, sans-serif; 
    font-size: 13px; 
    color: white; 
    &:after { 
    position: absolute; 
    content: ""; 
    display: block; 
    width: 19px; 
    height: 16px; 
    border: none; 
    background: url('../assets/images/deposit.png') no-repeat; 
    } 
}

我的解決方法：

儘量選用柔性盒，但似乎沒有爲button小號

來源

2015-10-16 Volodymyr Bakhmatiuk

問題在那裏，但我沒有看到問題在這裏，你想達到什麼目的？（它究竟是不是在做你想做的事情？） – SidOfc

你不是在尋找背景位置屬性嗎？你的形象是實際的結果，還是你想要達到的目標？如果這是你想要達到的目標，現在看起來如何？ –

@SidneyLiebrand更新 –

.my-button：after {display：inline-block;/*你給它顯示：塊 - 這使得它落入下一行* /}

body { 
 
    background: #333 
 
} 
 
.my-button { 
 
    position: relative; 
 
    width: 125px; 
 
    height: 40px; 
 
    background: none; 
 
    border: 2px solid #eee; 
 
    border-radius: 4px; 
 
    font-family: Proxima Nova Soft semibold, sans-serif; 
 
    font-size: 13px; 
 
    color: white; 
 
} 
 
.my-button:after { 
 
    content: ""; 
 
    vertical-align:middle; 
 
    display: inline-block; 
 
    /* you have given it display:block - which makes it fall in next line*/ 
 
    width: 19px; 
 
    height: 16px; 
 
    border: none; 
 
    background: url('https://cdn2.iconfinder.com/data/icons/ledicons/money_pound.png') left top no-repeat; 
 
}

<button class="my-button">Deposit</button>

來源

2015-10-16 14:13:37

幫助，謝謝！ –

不客氣！ –

我做了一個工作Fiddle可以滿足您的需求。您需要使:after元素display: inline-block;和不是使其成爲position: absolute;。使它position: absolute;將把它從'流'中取出

來源

2015-10-16 14:12:36

有幫助，謝謝！ –

你打敗了我！我的答案解釋瞭如何和爲什麼;） – SidOfc

所有這一切前後確實是之前或之後觸發一個額外的元素一個元素的內容，這些內容是其他html元素或文本無關緊要。

通過使您的形象position: relative沒有top，bottom，left或定義right和簡單display: inline-block它將作爲文本。

由於您使用了:after psuedo選擇器，該元素顯然位於文本之後，您現在需要做的就是將其與文本隔開並可能將其垂直居中。

您可以使用vertical-align: middle垂直居中（因爲這個圖像是通過display: inline-block表示爲文本）

之後，你可以使用的空間，因爲margin-left元素inline-block允許有保證金的元素。（雖然padding也可以正常工作，但在這種情況下，保證金是更好的選擇）

當文本變得更長時，這也會導致圖像移動（除非您設置了特定的寬度/高度，課程的形象）。

原因保證金>填充在這種情況下是因爲你間距節點內之間沒有間距內容一個節點（這是想法反正 - 把它看作添加具有裕度的空格）

希望這有助於，如果你需要更多的信息隨時問問題。

來源

2015-10-16 14:18:30 SidOfc

您可以使用您的代碼並添加3行代碼，顯示不必是內聯塊。

button:after { 
    right: 10px; 
    top: 50%; 
    margin-top: -8px; 
}

來源

2015-10-16 14:19:56 makshh

這絕對是一個解決方案，但不要忘記，如果你想做出更多的改變，這個代碼將只是越來越hackier;） – SidOfc

@makshh這段代碼也沒有對齊按鈕文本 - 所以你會錯過像素完美的距離按鈕文本和按鈕之間：圖像之後 –

水平對齊文字和：內按鈕

回答

相關問題