html - 需要将单选按钮置于内联 block 的中央

Question

我想将单选按钮置于行内 block 的中央。我有一个 fiddle ，可以向您展示我现在拥有的东西以及我想要它的外观。

https://jsfiddle.net/ut522fca/

代码目前看起来像这样:

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

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