How to move checkboxes to the center in a table cell

Josh from

I'm working on this simple table for bootstrap and I don't have really any experience with bootstrap and/or css. I need these checkboxes to be in the center of their column, but the problem is they stay on the far left. I put css (with <style> ) to create a custom class and set float: none, just to see if that would help, but it didn't. And since it's checkboxes, text-align doesn't help much.

Here's an image: tableImage

And here's the HTML:

<tr id="emailDiv" style="display: none">
    <td style="white-space: nowrap; width: 30%"><span id="emaillabel">Email Label</td>
    <td style="width: 5%">
        <input type="button" value="Edit" id="emailAlert" class="btn btn-default btn-block-mobile btn-xs" />
    </td>
    <td class="text-center" style="width: 8%">
        <input type="checkbox" class="sub-col-1 dont-get-data" data-billaccount="emailField" data-subtype="15" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-2 dont-get-data" data-billaccount="emailField" data-subtype="16" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-3 dont-get-data" data-billaccount="emailField" data-subtype="17" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-4 dont-get-data" data-billaccount="emailField" data-subtype="18" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-5 dont-get-data" data-billaccount="emailField" data-subtype="19" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-6 dont-get-data" data-billaccount="emailField" data-subtype="20" />
    </td>
    <td style="width: 8%">
        <input type="checkbox" class="sub-col-7 dont-get-data" data-billaccount="emailField" data-subtype="21" />
    </td>
</tr>

html css checkbox twitter-bootstrap-3 html-table

Answers

answered 2 months ago Rajan Patil #1

Try this in your css

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

answered 2 months ago varman #2

This would work.

Inline style

<td style="text-align:center; vertical-align:middle;">
    <input type="checkbox"> 
</td>

But its good if you use a class

CSS:

 .center-check-box{
    text-align:center; 
    vertical-align:middle;
 }

HTML:

 <td class="center-check-box">
    <input type="checkbox"> 
 </td>

answered 2 months ago Emmanuel Didacus #3

Try this instead CSS

 input[type='checkbox'] { 
       vertical-align: center; 
 }

answered 2 months ago Dwipa Arantha #4

You can use css class

.myCheckbox {
  text-align : center;
  border: 1px solid red; /* for illustration only */
  width:125px; /* for illustration only */
}
<table>
<tr>
<td class="myCheckbox">
  <input type="checkbox">
</td>
</tr>
</table>

answered 2 months ago Edward Severinsen #5

I'm working on this simple table for bootstrap

Try adding the Bootstrap m-auto class to the input elements.

answered 2 months ago Josh #6

This worked for me. Thanks to everyone who answered, this community wouldn't be what it is without you awesome people.

td input[type="checkbox"] {
    float: left;
    margin: 0 auto;
    width: 100%;
}

Credit goes to this guy. https://stackoverflow.com/a/20042250/4526963