Joseph Goh Joseph Goh - 5 months ago 20
CSS Question

CSS style checkbox inside td

i would like to set the checkbox inside a table to middle / center

the dirty way i am using is

<td>
<input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
</td>


However, i am looking a way that all the checbox inside the table will be centered. So i am come out with a css

.table td input[type="checkbox"] {
text-align: center;
}


but the css is not working as expected. how to style it in css?

Answer

Set it on the input's parent, in this case the td.

Updated showing how-to when targeting only specific cells

table td {
    text-align: center;
}

table {
  width: 300px;
}
table td {
  border: 1px solid;
}
table td.centered {
  text-align: center;
}
<table>
  <tr>
    <td class="centered">
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">
    </td>

    <td>
      Not centered
    </td>
  </tr>
</table>

If you have more content in same cell, add a wrapper

table {
  width: 300px;
}
table td {
  border: 1px solid;
  text-align: center;
}
table td div {
  text-align: left;
}
<table>
  <tr>
    <td>
      
      <input type="checkbox" style="text-align:center;" ng-model="x.dedbuffer">

      <div>
        Not centered
      </div>

    </td>
  </tr>
</table>