CODEWITHSUNDEEP
htmlcssvertical-alignment
user3779089
user3779089

Reputation: 419

How do I vertically align label, input and button?

I am trying to vertically align input and label and button( which is inside a div)

How can I achieve this

My present code which is not working is the following

<table>
    <tr>
        <label style="display: inline-block;float: left; vertical-align: baseline; position: relative; padding-top :5px">Select File</label>
    </tr>
    <tr>
        <input type="text" style="display: inline-block;float: left; vertical-align: baseline">
    </tr>
    <tr>
        <div style="display: inline-block;vertical-align: baseline;float: left" class="file-upload btn" >
            Browse
            <input class="required file-upload-input" type="file">
        </div>
    </tr>
</table>

Upvotes: 1

Views: 1708

Answers (2)

LcSalazar
LcSalazar

Reputation: 16839

Seems like you're confusing tr's with td's. You should use only one tr (table row), and place your elements inside a td (table cell) each.

Then, get rid of the divs, and get rid of the inline styles you set to the elements... A td is able to use vertical-align property, which should be set to middle, if you expect the align effect.

<table>
    <tr>
        <td style="vertical-align:middle;">
            <label>Select File</label>
        </td>
        <td style="vertical-align:middle;">
            <input type="text" />
        </td>
        <td style="vertical-align:middle;">
            <input class="required file-upload-input" type="file" />
        </td>
    </tr>
</table>

Upvotes: 2

Samuele Panarotto
Samuele Panarotto

Reputation: 277

Try this

<table>
    <tr vertical-align="middle">
        <td>
        <label style="display: inline-block;float: left; position: relative; padding-top :5px">
            Select File
        </label>
        </td>
    </tr>
    <tr>
        <td>
            <input type="text" style="display: inline-block;float: left; vertical-align: baseline">
        </td>
    </tr>
    <tr vertical-align="middle">
        <td>
            <div style="display: inline-block; float: left" class="file-upload btn"  >
                Browse
                <input class="required file-upload-input" type="file">
            </div>
        <td>
    </tr>
</table>

You also missed tags in rows

Upvotes: -1

Related Questions