我有一堆带有可变长度标签的单选按钮。我想知道如何将它们水平居中,以便标签位于页面的中心,但显示为“左对齐”。
期望的结果:
当前的 HTML 代码:
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />
最佳答案
display: table
适用于此:http://codepen.io/pageaffairs/pen/vKkAq
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div {display: table; margin: 0 auto; padding: 30px; background: #e7e7e7; border: 1px solid black;}
</style>
</head>
<body>
<div>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable</label><br>
<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label>
</div>
</body>
</html>
关于html - 带标签的单选按钮中心组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25172026/