如何在表格单元格中垂直和水平居中对齐 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>最佳答案
在 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>关于html - 表格单元格中的输入和标签对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43562033/