Aligning checkbox to center of td styling only checkbox?

Question

I have a table that has particular rows containing checkboxes. I want to have these checkboxes aligned to center of their parent td's. I know that I can achieve that by styling the parent td like that:

td {
    text-align: center;
}

I also know that I can easily achieve that with jQuery, but unfortunately, I cannot use jQuery.

The table is created through .NET and I cannot target the specific columns that contain checkboxes by giving a certain class.

I wonder if there is a way of styling the checkbox itself in order to align it to the center of it's parent td.

Something like:

input[type=checkbox] {
    margin: auto;
}

score 7 · Accepted Answer · edited May 23 '17 at 12:23

7

You could do it by set display: block; and margin: 0 auto; to input[type=checkbox]

JSFiddle - DEMO

td {
    width: 100%;
    background: #EEE;
}
input[type=checkbox] {
    margin: 0 auto;
    display: block;
}

Solution 2: - DEMO

Set display: table; or display: flex; to input[type=checkbox]

td {
    width: 100%;
    background: #EEE;
}
input[type=checkbox] {
    margin: 0 auto;
    display: table;
}

For More Info:

What, exactly, is needed for “margin: 0 auto;” to work?

edited May 23 '17 at 12:23

Community

1
1

answered Sep 17 '14 at 07:20

Anonymous

9,582
2
21
39

1

Thanks for your time! :) – kapantzak Sep 17 '14 at 07:57
`vertical-align` stops working if used with `margin: 0 auto;`. – Love Putin Jun 25 '20 at 10:04

Aligning checkbox to center of td styling only checkbox?

1 Answers1