如何在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"，但不起作用。

有什么想法吗？

- Jey Geethan

---

尝试设置 margin-bottom:10px; - ACP

@Oscar 这仅在图像具有相同的尺寸并与10px对齐时才有效。 - Eric Cope

Answer 1

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

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

- outis

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>

- Sarfraz

Answer 3

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

- AvrahamR