gpt4 book ai didi

html - 表格单元格中的输入和标签对齐

转载 作者:行者123 更新时间:2023-11-28 03:54:12 24 4
gpt4 key购买 nike

如何在表格单元格中垂直和水平居中对齐 labelinput

请帮忙。谢谢。

现在看来

now

它应该是什么样子

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>

最佳答案

inputlabel 上设置的

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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com