無法將按鈕文字垂直居中

因此，我通過stackoverflow.com和其他各種網站上的其他各種問題進行了幾次搜索，以解決我一直遇到的這個問題。嘗試我發現的一切，我都沒有運氣。我使用CSS來設置這些按鈕在網站上的使用方式，並且我無法讓文本在Firefox中垂直居中。它以Google Chrome和Internet Explorer爲中心（瘋狂，我知道）。然而，在小提琴中，文字看起來並不是在Google Chrome中垂直居中。無法將按鈕文字垂直居中

這裏是CSS：

button { 
    margin: 0; 
    padding: 0; 
} 
button.slide_button { 
    background-color: #E3E4F0; 
    border: 1px #8C8C8C solid; 
    border-radius: 25px; 
    height: 25px; 
    padding: 0px 5px; 
    vertical-align: middle; 
    line-height: 25px; 
} 
button.slide_button:hover { 
    background-color: #E3E4F0; 
    border: 1px #8C8C8C solid; 
    border-radius: 25px; 
    height: 25px; 
    color: #F00; 
} 
button.slide_button:active { 
    background-color: #BFBFE3; 
    border: 1px #8C8C8C solid; 
    border-radius: 25px; 
    height: 25px; 
}

下面是HTML（包含Javascript函數的引用我用的網站上）：

<button id="slide_prev" class="slide_button" onClick="prevImg()">Previous</button> 
<button id="slide_pause" class="slide_button" onClick="pauseShow()">Pause</button> 
<button id="slide_next" class="slide_button" onClick="nextImg()">Next</button>

這裏是小提琴：http://jsfiddle.net/59ven/

來源

2013-07-30 P4T4R

刪除'line-height：25px;'在OSX上的Chrome中可用。 – stefanglase

如果它是一個div，將高度和行高設置爲相同的值將工作。按鈕是不同的東西，這可能解釋了stefanglase的結果。無論如何，爲什麼要使用按鈕？你已經標記了這麼多，你可以很容易地把它劃分爲div，然後外觀就會更加可預測。 – 2013-07-30 21:09:03

這是一個很好的問題。無論如何，我應該使用一個div。我想我一直很專注於試圖解決這個問題，我沒有想到簡單地使用div。之前，我不確定是否有div的onClick屬性，但我只是查了一下，發現了它。我想我會嘗試一個div，讓你們知道它是如何工作的。 – P4T4R

我個人喜歡使用填充在按鈕上居中文本。這可以讓你在所有的瀏覽器上獲得一個很好的垂直（水平）居中，你可以控制上下的間距。

我通常會做這樣的事情與CSS（左出懸停效果）：

input[type="button"], input[type="submit"], a.btn:link, a.btn:active, a.btn:visited { 
    background-color: #E3E4F0; 
    border: 1px #8C8C8C solid; 
    border-radius: 25px; 
    padding: 5px 8px 5px 8px; 
    text-decoration: none; 
}

然後你可以使用它像這樣：

<input type="button" onclick="whatever" value="Button Text" />

或做一個鏈接的模樣按鈕

<a href="#" class="btn">Button Text</a>

請注意，使用「高度」和「行高」屬性可能會限制您。例如，如果你想要一個帶有兩行文本的按鈕，你真的想讓它們在每行25px行高？通過填充，可以保持18px-20px的法線高度，並且該按鈕可以很好地適應多行。

希望有幫助！

來源

2013-07-30 21:15:26 Ricketts

好吧，標籤類型按鈕的行爲超過

我認爲這不重要。輸入標籤只是我的首選。 – Ricketts

完美，這是一個很好的解決方法。我希望我剛剛使用填充從一開始就使按鈕變大。這個高度屬性給了我所有瀏覽器的各種問題。非常感謝。 – P4T4R

這是一個類似的解決方案。它已經在這裏回答s.o Vertically align text in a div

來源

2013-07-30 21:05:03 ihaxx

如果你看看我的代碼，你會看到所有這些技術已經實施。 – P4T4R

vertical-align不用於對齊按鈕的文本。如果你從css中刪除垂直對齊沒有任何反應，並且如果你將它設置爲top或其他東西沒有改變。問題是由於行高屬性。如果你刪除它，一切都將是okey。

來源

2013-07-30 21:18:07

隨着一切刪除它在Chrome和IE，但不是Firefox的作品。 – P4T4R

我剛剛刪除行高，然後在Firefox中測試，文本在中間。只知道垂直對齊在這裏什麼都不做。 –

我刪除了行高和垂直對齊，文本坐在底部。我欣賞幫助。 – P4T4R

無法將按鈕文字垂直居中

回答

相關問題