Search code examples
htmlcssbuttonalignmentword-wrap

Button text wrap: vertical alignment issue

I needed to wrap text inside my buttons so I found this solution:

How to wrap text of html button with fixed width

However, after applying the solution I noticed that the vertical alignment of buttons changes. Here is the screenshot:

http://tinyurl.com/88hah7l

Here is the code:

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

Any idea what is causing the alignment change? Thanks!

Solution

  • I'm not sure what's causing this misalignment, but apparently vertical-align:middle seems to fix it:

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