我想完全重置一個button的繼承CSS，因此它的行爲與任何其他行內塊元素完全相同。但是，我遇到了一個問題，即一個按鈕的文本永遠卡在垂直居中。CSS <button>重置：垂直標籤位置？

在小提琴（和截圖）以下時，button和div有完全相同的樣式根據Chrome開發者控制檯，但按鈕的文本是垂直居中，而div的是不是：

button vs div

任何人都知道屬性或選擇將完全復位按鈕，具體包括它的標籤位置？

回答

有一個在Chrome以外的其他任何瀏覽器〜25沒辦法。我聯繫了Chromium項目，瞭解它在Chrome 27中無法使用（請參閱@winterblood answer &註釋）。他們這樣說：

問題是我們現在在按鈕內部的匿名塊上使用margin：auto來執行按鈕內部的居中以獲得安全居中。所以，不幸的是，沒有辦法從CSS設計它。您之前能夠控制此行爲是真正實現細節泄漏。

所以，真正的答案是，你不能在任何瀏覽器樣式此，除了鉻〜25，其中-webkit-box-align不慎暴露，如@winterblood回答。

來源

2013-03-25 rgthree

對於webkit，您需要覆蓋值爲baseline或start的-webkit-box-align。

我還沒有運氣在Firefox中實現這一點（從一個非常簡短的看）。

來源

2013-03-25 22:46:46

'-moz-box-align：baseline;'應該在Firefox中做到這一點。您也可能想爲符合CSS3的瀏覽器添加標準的'box-align：baseline;'。 – clav 2013-03-25 22:51:51

不幸的是，這是行不通的。首先，我將'display'重寫爲'inline-block'，它將刪除'display：-webkit-box'功能。其次，至少在Chrome 27 dev中，即使設置'box-align'屬性也不會影響標籤的位置（當設置'display：-webkit-box'時，它會影響'div'。也許這是一個錯誤。我已經對小提琴進行了版本管理，以顯示它不起作用（至少在Chrome 27中）：http://jsfiddle.net/rgthree/vT3a7/5/ – rgthree 2013-03-25 22:56:01

@clav'-mox-box-align：baseline'或'：開始'不適合我在jsFiddle。 @rgthree'-webkit-box-align：baseline'對我來說很適合用'display：inline-block'（在Chrome 25中） – 2013-03-25 23:00:38

CSS <button>重置：垂直標籤位置？

回答

回答

相關問題