html - 带标签的单选按钮中心组

标签 html css radio-button

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

期望的结果:

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 />

最佳答案

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/

相关文章:

javascript - jquery .attr() 不处理输入元素

javascript - 我正在使用 struts2,我正在询问单选按钮验证 <s :radio>

javascript - 取消选中 Bootstrap 单选按钮

python - 在表格单元格中填充颜色

javascript - 将部分html文本替换为input val JS

html - 网格 CSS 导航栏样式问题

javascript - 使用 ngStyle 将样式分配给 tr :first-child td

java - 寻找基于 Java 的 SCSS 到 CSS 转换器

css - 为什么几乎所有的文件在输出中都被忽略了?

javascript - 选中单选按钮时显示 div