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

Answer 2

<div style="width=define_your_image_container_width_here">
  <div style="float:left;vertical-align:middle"><input type="radio" name="pic" value="1"/></div>
  <div style="float:right;"><img src="pic01.jpg"/></div>
</div>

Answer 3

除了上一个答案之外，单选按钮必须与图像具有相同的实际高度才能工作。 实际上我的意思是它必须匹配高度，填充，边距和边框。