按鈕文本換行：垂直對齊問題

我需要換在我的按鈕的文本，所以我發現這個解決方案：按鈕文本換行：垂直對齊問題

How to wrap text of html button with fixed width

然而，應用該解決方案後，我注意到的按鈕改變垂直對齊方式。下面是截圖：

這裏是代碼：

<html> 
<head> 
    <title>Button Wrap</title> 

    <style type="text/css"> 

     INPUT.StandardButton 
     {   
      WIDTH: 87px; 
      HEIGHT: 38px; 
      font-size: 10pt; 
      Font-weight: bold;      
      cursor: pointer; 
      FONT-FAMILY: Arial, Verdana; 
      COLOR: #0049A5;         
     } 

    </style> 

<head> 
<body> 

    <input type="button" value="NoWrap" class="StandardButton" /> 
    <input type="button" value="This is Test 1" class="StandardButton" style="white-space: normal;" /> 
    <input type="button" value="This is Test 2" class="StandardButton" style="white-space: normal;" /> 
    <input type="button" value="This is Test 3" class="StandardButton" style="white-space: normal;" /> 

</body> 
</html>

任何想法是什麼原因造成的排列變化？謝謝！

來源

2012-01-03 Alex S

我不知道是什麼導致這種錯位，但顯然vertical-align:middle似乎解決它：

http://jsfiddle.net/ptriek/Dr5hM/

來源

2012-01-03 16:27:31 ptriek

在chrome中，按鈕上的空白屬性被設置爲pre，所以與它設置爲正常的方塊相似，只是包裝看起來是唯一顯示此問題的方塊。這很奇怪。 – 2012-01-03 16:33:22

垂直對齊確實解決了問題。謝謝！ – 2012-01-03 17:38:56

對不起，更新速度如此之快，但我只注意到，添加vertical-align：middle將刪除IE9中的文字換行。但在Chrome中運行良好。有任何想法嗎？ – 2012-01-03 17:48:01

不知道是什麼原因要麼導致，但VALIGN，把按鈕在表中，我們的決策按鈕寬度較短應該很快清除它。

來源

2012-01-03 16:48:17

按鈕文本換行：垂直對齊問題

回答

相關問題