CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2785929
user2785929

Reputation: 1035

Align checkbox with text inside a td

I know this question is answered several times but I can't seems find a post that is not using <label> as label for their checkbox

I want to align the text and checkbox inside a <td> without using a <label>. Here is my table structure

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th> test </th>
            <th> beng </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> broom </td>
            <td class="tdClass">
                <input type="checkbox" value="0" class="benefits"> test
            </td>
        </tr>
    </tbody>
</table>

And I tried using CSS to align them

td.test {
    text-align: center;
    vertical-align: middle !important;
}

But it doesn't work. Any ideas?

Here is a live demo

also if it is related I'm using bootstrap

Upvotes: 2

Views: 4674

Answers (1)

Dipak
Dipak

Reputation: 12190

You can use

input[type="checkbox"] {
    vertical-align: top;
}

Fiddle

Upvotes: 3

Related Questions