CODEWITHSUNDEEP
htmlcssbuttonalignmentword-wrap
Alex S
Alex S

Reputation: 1221

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!

Upvotes: 2

Views: 3346

Answers (2)

B Woods
B Woods

Reputation: 580

Not sure what is causing it either but valign, putting the buttons in a table, our making the buttons width shorter should clear this up very quickly.

Upvotes: 0

ptriek
ptriek

Reputation: 9276

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

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

Upvotes: 6

Related Questions