Question

我有一些带单选按钮的文字。我通过<div style="text-align:center;">居中对齐。它看起来像这样：

有没有办法可以垂直对齐所有单选按钮，同时确保整个内容保持中心 d？

我尝试在<div style="text-align:left;">中单独包装单选按钮，但这并不能提供我需要的结果。

Answer 1

您需要将div居中，然后将您的无线电对齐到该div：

#main {
  text-align: center;
  margin: 0 auto;
}

#radioDiv {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}

<div id="main">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/>

  <div id="radioDiv">
    <br/><input type="radio" name="example" value="x">x
    <br/><input type="radio" name="example" value="xx">xx
    <br/><input type="radio" name="example" value="xxx">xxx
  </div>
</div>

这里的jsfiddle应help。

Answer 2

＆＃13;

<html>
<body>

<div style="margin: auto;width:500px;height: 100px;">
<form action="">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
</div>
</body>
</html>

＆＃13;

垂直对齐中心对齐文本中的单选按钮

2 个答案: