How to Center a Checkbox in a Table Cell

How to center a checkbox in a table cell?

How about this... http://jsfiddle.net/gSaPb/

---

Check out my example on jsFiddle: http://jsfiddle.net/QzPGu. Code snippet:

td {
  text-align: center;
  /* center checkbox horizontally */
  vertical-align: middle;
  /* center checkbox vertically */
}

table {
  border: 1px solid;
  width: 200px;
}

tr {
  height: 80px;
}

<table>
  <tr>
    <td>
      <input type="checkbox" name="myTextEditBox" value="checked" /> checkbox
    </td>
  </tr>
</table>

How to move checkboxes to the center in a table cell

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

Centering the checkbox in a line

Try position:relative and bottom:**px as per your need

input {    font-size: 16px;}
label {    font-size: 11px;    vertical-align: middle;}
form {    margin-top: 30px;    display: flex;    justify-content: center;    align-items: center;    flex-direction: column;}
input[type="checkbox"] {    width:15px;    height: 15px;    -webkit-appearance: none;    background: white;    outline: none;    border: none;    border-radius: 50%;    transition: .5s;    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);    margin:0;    bottom:-3.5px;    position:relative        }
input:checked[type="checkbox"] {    background-color: transparent;}

<form class="form-box__form form">    <input type="e-mail" name="e-mail" id="e-mail" placeholder="e-mail"/>    <input type="password" name="password" id="password" placeholder="password"/>    <button>Create account</button>    <div style="text-align: center;display:inline;">   <input type="checkbox" name="consent" id="consent" >    <label for="consent" > I agree to whatever you want me to agree</label>    </div></form>

Centering checkbox in table column

Of course it cannot be centered on the td given the HTML structure you have:

The actual checkbox is hidden deep inside many nested div elements. Each of these has display: block; by default which means it grabs all horizontals space its parent element allows it to get.

On top of that, the element you're using is display using flexbox.

You can center your checkboxes adding the following CSS code:

.v-input__slot {
  align-items: center;
  justify-content: center;
}

How to center checkbox vertically in a table-cell?

The issue..

Checkbox elements, like other input elements are subject to vendor specific appearance styling- you can override this by using appearance:none or -webkit-appearance:none etc..however this will then stop the checkbox from rendering at all.

As such, you have to 'live' with the default styling to some extent and implement a few overrides, for vertical alignment in the example you have given, you have to 'bump it up' by 1px, eg:

.category-item .input-container input {
    margin:-1px 0 1px 0; /* <-- here */
    padding: 0;
    vertical-align: middle;
}

Demo Fiddle

More on appearance from MDN

The -moz-appearance [sic] CSS property is used in Gecko (Firefox) to
display an element using a platform-native styling based on the
operating system's theme.

---

Styling your own checkbox

A workaround is to 'replace' the checkbox element entirely, whilst still retaining its functionality- this can be done by adding a label element then applying som nifty CSS, for example, the below:

Demo Fiddle

HTML

<div class="category-item">
    <div class="input-container">
        <input class='checkbox' id='checkbox' type="checkbox" />
        <label for='checkbox' class='checkbox'></label>
    </div>
</div>

CSS

.category-item {
    display: table;
    border: 1px solid #cccccc;
    margin: 0;
    padding: 0;
    height:30px;
}
.category-item .input-container {
    display: table-cell;
    margin: 0;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    height:30px;
}
label.checkbox {
    position:relative;
    vertical-align: middle;
    border:1px solid black;
    height:10px;
    width:10px;
    margin:0;
    padding:0;
    margin:-2px 0 2px 0;
    line-height:1em;
    padding:0;
    overflow:hidden;
    display:inline-block;
}
input.checkbox {
    appearance:none;
    height:0;
    width:0;
    overflow:hidden;
    display:none;
    margin:0;
    padding:0;
    -webkit-appearance:none;
}

input.checkbox:checked +label.checkbox:before {
    content:'\2713';
    position:absolute;
    top:-3px;
    font-size:10px;
    left:2px;
}

Centering Checkbox in Table

Just add custom css for MDBootstrap Custom checkbox like this:

.custom-control-label::before, .custom-control-label::after {  left: -1.25rem !important;}

<!-- Font Awesome --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"><!-- Bootstrap core CSS --><link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"><!-- Material Design Bootstrap --><link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.3/css/mdb.min.css" rel="stylesheet">
<table border="1">    <tr>        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">            <div class="custom-control custom-checkbox">                <input type="checkbox" class="custom-control-input" id="defaultUnchecked">                <label class="custom-control-label" for="defaultUnchecked"></label>            </div>        </td>    </tr>    <tr>        <td style="text-align:center;padding:0Px; vertical-align:middle; width: 50px; height: 50px">            <input type="checkbox" >        </td>    </tr></table>

Vertically center checkbox in Bootstrap table cell

Remove margin-top for check box to align the check box centrally.

input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    margin: 0;
}

---

Related Topics