Question

我有一堆带有可变长度标签的单选按钮。我想知道如何将它们水平居中以使标签位于页面的中心，但显示为“左对齐”。

期望的结果：

enter image description here

当前的HTML代码：

<input type="radio" name="option" id="option#" value="radiobutton" />
<label class="databaseoption" for="option#">Text of variable length</label><br />

Answer 1

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>

Answer 2

您可以使用无边框表格，并将实际的单选按钮与其标签分开。

或者如果您不想使用表格，请使用具有相对定位且可能属性float设置为左侧的div。

Answer 3

一种方法是使用中心对齐的<div>，然后使用<span>样式作为内联块，

<div style="text-align: center;">
    <span style="text-align: left; display: inline-block; border: 1px solid grey; padding: 0.5em;">
        <input type="radio" name="option" id="option#" value="radiobutton" />
        <label class="databaseoption" for="option#">Text of variable length</label><br />
        <input type="radio" name="option" id="option#" value="radiobutton" />
        <label class="databaseoption" for="option#">Text of variable length variable lenght</label><br />
        <input type="radio" name="option" id="option#" value="radiobutton" />
        <label class="databaseoption" for="option#">Text of variable length variable</label><br />
    </span>
</div>

中心组的单选按钮与标签

3 个答案: