Html 按钮文本换行：垂直对齐问题_Html_Css_Button_Alignment_Word Wrap

Html 按钮文本换行：垂直对齐问题

html css button

Html 按钮文本换行：垂直对齐问题,html,css,button,alignment,word-wrap,Html,Css,Button,Alignment,Word Wrap,我需要在按钮中包装文本，因此我找到了以下解决方案：然而，应用该解决方案后，我注意到按钮的垂直对齐方式发生了变化。以下是截图：代码如下： <html> <head> <title>Button Wrap</title> <style type="text/css"> INPUT.StandardButton { WIDTH: 87px

我需要在按钮中包装文本，因此我找到了以下解决方案：

然而，应用该解决方案后，我注意到按钮的垂直对齐方式发生了变化。以下是截图：

代码如下：

<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>


纽扣包装
INPUT.StandardButton
{           
宽度：87px；
高度：38px；
字号：10pt；
字体大小：粗体；
光标：指针；
字体系列：Arial，Verdana；
颜色：#0049A5；
}

知道是什么导致了路线的改变吗？谢谢

我不确定是什么导致了这种错位，但显然，

垂直对齐：中间

似乎解决了这个问题：

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

在chrome中，按钮上的空白属性设置为pre，因此将其设置为normal的包装框似乎是唯一显示此问题的框。这很奇怪。垂直对齐确实解决了这个问题。谢谢很抱歉更新这么快，但我刚刚注意到添加垂直对齐：中间将删除IE9中的文本换行。但在铬合金中效果很好。有什么想法吗？好的，比较了JSFIDLE和我的html中的差异，发现DOCTYPE需要设置为。我有同样的问题，尽管如此，但是

vertical align

还是为我解决了这个问题。谢谢！