CODEWITHSUNDEEP
htmlcss
Maestro13
Maestro13

Reputation: 3696

Vertical align within td element when using mix of text and buttons

I have a table containing the following elements in a row:

<td align="left">
    <input
        type="button"
        class="buttonQUAL" onclick="toggleById('x1'); toggleById('x2'); return true;"
        onMouseOver="this.style.cursor='hand'"
        value="XXXX">
    <div id="x1" class="listQUAL" style="display:none">
        CORP<br>
        PREV<br>
    </div>
</td>
<td>
    <br>
    <div id="x2" class="listQUAL" style="display:none">
        Corporate Action Reference<br>
        Previous Message Reference
    </div>
</td>

The button toggles visibility of the div elements. I wish to vertically align the text lines made visible exactly so I set the following in css (note that I have a slightly smaller font size for the toggled text):

input.buttonQUAL {
    padding:0px;
    border:0px;
    margin-left:4px;
    margin-top: 0px;
    margin-bottom: 0px;
}
div.listQUAL {
    font-size: 90%;
}

By removing padding, border and vertical margins, I hope to have achieved that the alignment is correct now (notice that the first br element is outside the div so has 100% font size, same as the button). And it sure looks to be OK to the untrained eye.

Is all this correct or will there still be some mis-alignment, perhaps by a fraction of a pixel? Will this behave well in all browser types? Is the left margin of 4 pixels, by which I try to left aline button value text and toggled text correct?

Upvotes: 0

Views: 368

Answers (2)

Jan Wikholm
Jan Wikholm

Reputation: 1575

Given that input fields are always rendered as native UI elements, you cannot predict exactly its size nor that it would match the single <br> there.

I would suggest that by far the easiest solution, especially since you are already using tables, is to have the appearing divs be on a separate <tr> which would automatically vertically align them to start from the same spot, and it would not matter whether the <input> and <br> are the same height AND it would actually work without stylesheets enabled.

Upvotes: 1

Pratik Galoria
Pratik Galoria

Reputation: 351

Would be better if you had attached a screenshot so that I can understand, However, you can try line-height property of css in your div class. set line-height equal to the height of your div to set your inner elements exactly in the center of your div.

for example :

div.listQUAL {
    height: 30px; line-height: 30px; font-size: 90%;
}

try it.

Upvotes: 1

Related Questions