Search code examples
htmlcsshtml-tablevertical-alignment

Input and label alignment in table cell

How to align label and input vertically, and horizontally, centered in a table cell?

Please help. Thanks.

Now it looks

now

How it should look

must be

<!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>

Solution

  • vertical-align: middle set on the input and label will center both properly.

    I also dropped a few non-needed properties, like the 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>