Question

我想将一个单选按钮集中在一个内联块中。我有一个小提琴，告诉你我现在拥有什么以及我希望它看起来如何。

代码目前看起来像这样：

  <span style="width: 45px; height: 45px; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>

Answer 1

<span style="width: 45px; height: 45px; line-height: 45px; text-align: center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>

＆＃13;

  <span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" value="006884"></span>
  <span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #00909E"><input type="radio" name="Color" id="radio" value="00909E"></span>
  <span style="width: 45px; height: 45px; line-height:45px; text-align:center; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #89DBEC"><input type="radio" name="Color" id="radio" value="89DBEC"></span>
  <br>
	<br>

        <p>I would like it to look like the boxes below with the radio button in the center without using a table.</p>        
  <table cellpadding="10">
    <tr>
      <td bgcolor="#006884"><input type="radio" name="Color" id="radio" value="006884"></td>
      <td bgcolor="#00909E"><input type="radio" name="Color" id="radio2" value="00909E"></td>
      <td bgcolor="#89DBEC"><input type="radio" name="Color" id="radio3" value="89DBEC"></td>
    </tr>
  </table>

＆＃13;

Answer 2

将此添加到您的CSS文件

#radio{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

span{
    position:relative;
}

对于内联：请改用以下代码。

<span style="width: 45px; position:relative; height: 45px; margin:auto; display: inline-block; vertical-align: middle; border-radius: 2px; background: #006884"><input type="radio" name="Color" id="radio" style="margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" value="006884"></span>

需要将单选按钮置于内联块内

2 个答案: