按钮文字换行：垂直对齐问题答案

【问题标题】：Button text wrap: vertical alignment issue按钮文字换行：垂直对齐问题
【发布时间】：2012-02-01 15:58:22
【问题描述】：

我需要在我的按钮内换行，所以我找到了这个解决方案：

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>

知道是什么导致了对齐变化吗？谢谢！

【问题讨论】：

标签： html css button alignment word-wrap

【解决方案1】：

我不确定是什么导致了这种错位，但显然vertical-align:middle 似乎可以解决它：

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

【讨论】：

在 chrome 中，按钮上的空白属性设置为 pre，因此设置为正常的框似乎是唯一显示此问题的框。这很奇怪。
垂直对齐确实解决了这个问题。谢谢！
抱歉更新这么快，但我只是注意到添加vertical-align:middle 将删除IE9 中的文本换行。但是在 Chrome 中运行良好。有什么想法吗？
OK，对比一下JSFiddle和我的html的区别，发现需要将DOCTYPE设置为
即使使用我也遇到了同样的问题，但vertical-align 仍然为我解决了这个问题。非常感谢！

【解决方案2】：

也不确定是什么原因造成的，但 valign 将按钮放在一个表格中，我们缩短按钮宽度应该很快就能解决这个问题。

【讨论】：