Question

我需要在我的按钮中包装文本，所以我找到了这个解决方案：

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>

知道造成对齐变化的原因是什么？谢谢！

Answer 1

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

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

Answer 2

不确定导致它的原因是什么，但是将手表按钮放在一个表格中，我们将按钮宽度缩短应该很快就能清除它。

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

2 个答案: