CODEWITHSUNDEEP
htmlcss
SkyeBoniwell
SkyeBoniwell

Reputation: 7122

vertical alignment of label

I'm having trouble aligning a label so that it is vertically flush with the textarea next to it.

It sticks out a few pixels too high and nothing I do seems to fix it.

I know that it looks weird with "ul" tag, but that is an element so that this section can be used with jQuery-UI sortable plugin.

Here is the HTML:

<tr>
<td>Objectives</td>
<td>
    <input type="button" style="margin-top: 4px;" value="Add Objective">
    <div>
        <ul>
            <tr>
                <td style="vertical-align:top;">
                    <label style=" background-color: gray; color: white; cursor: pointer; font-weight: bold; padding: 4px;">1</label>
                </td>
                <td>
                    <textarea>Test</textarea>
                </td>
                <div style="vertical-align:top; height: 60px; color: red; font-weight: bold; size: 12px; cursor: pointer; float: right;">  x  </div>
            </tr>
            <tr>
            <tr>
        </ul>
    </div>
</td>

Can anyone see anyway of getting this to work?

Upvotes: 0

Views: 4763

Answers (3)

Prasanth K C
Prasanth K C

Reputation: 7332

Try applying vertical-align:middle; to respective td

Hope it will help

Upvotes: 1

user2337159
user2337159

Reputation: 5

Just add "vertical-align: super;" to label

Upvotes: 1

PSL
PSL

Reputation: 123739

Just provide <td style="vertical-align:middle;"> and also fix your html:-

http://jsfiddle.net/7VvmH/

You may probably want to move from inline-css to css classes

Upvotes: 4

Related Questions