如何将单选按钮与html中的图像垂直对齐？

Question

我有多个 100x100 的图像。我要求用户通过在每个之前放置一个单选按钮来选择其中一个。

这是代码：

<div>
   <input type="radio" name="pic" value="1"/><img src="pic01.jpg"/><br/>
   <input type="radio" name="pic" value="2"/><img src="pic02.jpg"/><br/>
   ....

等等......但问题是单选按钮呈现在行的底部，我想让它位于图像的垂直中间。我试过了style="vertical-align:middle"，它不起作用。

有任何想法吗？

Answer 1

当应用于内联元素时，vertical-align指定将子元素的某个部分与父行框的相应部分对齐的位置。例如，“中间”大致对齐每个的中间部分。如果要对齐两个兄弟元素，则需要对两者应用相同的垂直对齐方式，否则元素将与父元素的基线对齐。

<style type="text/css">
  input[type="radio"], input[type="radio"]+label img {
    vertical-align: middle;
  }
</style>

<ul>
  <li>
    <input type="radio" name="pic" id="pic1" value="1" />
    <label for="pic1"><img src="pic1.jpg" alt="pic 1" /></label>
  </li>
  <li>
   <input type="radio" name="pic" id="pic2" value="2" />
   <label for="pic2"><img src="pic2.jpg" alt="pic 2" /></label>
  </li>
</ul>