html - 如何将单选按钮与 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>