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

发布于 2024-08-13 08:15:43 字数 414 浏览 2 评论 0原文

我有多个 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" 但它不起作用。

有什么想法吗？

原文

I have multiple image of 100x100. I ask the user to choose one of them by putting an radio button before each of them.

This is the code :

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

and so on... But the problem is that the radio button renders at the bottom of the line and I want to make it come in the vertical middle of the image. I have tried style="vertical-align:middle" and it does not work.

Any ideas?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光清浅 2024-08-20 08:15:43

当应用于内联元素时，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>

When applied to inline elements, vertical-align specifies where to align a certain part of the child element to a corresponding part of the parent's line box. For example, "middle" roughly aligns the middle parts of each. If you want to align two siblings, you'll need to apply the same vertical alignment to both, otherwise the element will align to the parent's baseline.

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

回复收藏 0 原文

不喜欢何必死缠烂打 2024-08-20 08:15:43

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

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

回复收藏 0 原文