Question

如何将label和input垂直，水平地对齐在表格单元格中居中？

请帮忙。感谢。

现在看起来

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>

Answer 1

设置在

String regex = "^(([0-9]{3})[-.\\s]?([0-9]{3})[-.\\s]?([0-9]{4}))$";

上的

vertical-align: middle和input将正确居中。

我还删除了一些不需要的属性，例如label

line-height

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>

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

2 个答案: