table 单元格中的输入和标签对齐

Question

如何在 table 单元格中垂直和水平居中对齐 label 和 input？

请帮忙。谢谢。

现在看来

外观应该如何

<!DOCTYPE html>
<html>
<head>
 <title></title>
</head>
<body>
 <style type="text/css">
  table {
   width: 200px;
   height: 200px;
   background-color: blue;
   text-align: center;
   vertical-align: middle;
  }

  td {
   background-color: yellow;
  }

  input {
   width: 50px;
   height: 50px;
  }

  label {
   display: inline-block;
   line-height: 50px;
  }
 </style>
 <table>
  
  <tr>
     
   <td>
    <input type="checkbox" name="" id="c1">
    <label for="c1">FFFF</label>
   </td>
  </tr>
 </table>
</body>
</html>

Answer 1

在 input 和 label 上设置

vertical-align: middle 将正确居中。

我还删除了一些不需要的属性，比如 line-height

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <style type="text/css">
    table {
      width: 200px;
      height: 200px;
      background-color: blue;
      text-align: center;
    }
    
    td {
      background-color: yellow;
    }
    
    input {
      width: 50px;
      height: 50px;
      vertical-align: middle;
    }
    
    label {
      vertical-align: middle;
    }
  </style>
  <table>

    <tr>

      <td>
        <input type="checkbox" name="" id="c1">
        <label for="c1">FFFF</label>
      </td>
    </tr>
  </table>
</body>

</html>

Answer 2

        <!DOCTYPE html>
        <html>
        <head>
         <title></title>
        </head>
        <body>
         <style type="text/css">
          table {
           width: 200px;
           height: 200px;
           background-color: blue;
           text-align: center;
           vertical-align: middle;
          }

          td {
           background-color: yellow;
          }

          input {
           width: 50px;
           height: 50px;      
              vertical-align: middle;
          }

          label {
           display: inline-block;
           line-height: 50px;
              vertical-align: middle;
              
          }
         </style>
         <table>
          
          <tr>
             
           <td>
            <input type="checkbox" name="" id="c1">
            <label for="c1">FFFF</label>
           </td>
          </tr>
         </table>
        </body>
        </html>

table 单元格中的输入和标签对齐

Input and label alignment in table cell

html

css

html-table

vertical-alignment