How place a checkbox into the center of a table cell?

A checkbox can be placed in the center of the table cell by either using the plain CSS stylesheet or with the help of bootstrap. Here we will be seeing different ways to center the checkbox in a cell of the table using pure CSS.

Method 1:

In this method, we are using the display FlexBox property to center the checkbox in the cell of the table. 

Note: This method will not make the text after the checkbox to be treated as the block element and text entered after the check will be visible

Example:



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
/* Stylesheet*/
  table{
    border-collapse: collapse;
    padding: 20px;
  }
  td{
    border: 1px solid #000;
    padding: 20px;
  }
  .checkbox{
    width: 200px;
    background-color:#098043;
    color:#fff;
    margin: auto;
  }
  input{
    margin: auto; 
    /*setting margin to auto of the cheeckbox*/
    display: flex;/*Flex box property*/
  }
</style>
<body>
  <!-- Table start-->
  <table>
  <!-- row start-->
    <tr>
  <!-- column start-->
      <td class="checkbox">Geeks for Geeks</td>
      <td class="checkbox">Geeks for Geeks</td>
  <!-- Column closed-->
    </tr>
  <!-- row closed-->
    <tr>
      <td class="checkbox">
        <input type="checkbox">
      </td>
      <td class="checkbox">
        <input type="checkbox">
      </td>
    </tr>
  </table>
    
</body>
</html>

chevron_right


Output:

Method 2:

In this method, we will be using Text align center property of the CSS to center the checkbox in the cell.

Note: This method will center everything in the td of the table.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  table, td{
    border-collapse: collapse;
    border: 1px solid #000;
    padding: 10px;
  }
  .checkbox{
    text-align: center;
 /*Centering the text in a td of the table*/
  }
</style>
<body>
  <table>
    <tr>
      <td>
        Geeks for Geeks
      </td>
      <td>
        Geeks for Geeks
      </td>
    </tr>
    <tr>
      <td class="checkbox">
        <input type="checkbox">
      </td>
      <td class="checkbox">
        <input type="checkbox">
      </td>
    </tr>
  </table>
    
</body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.