如何中间垂直对齐单选按钮的图像在HTML中？ [英] How to middle vertical align a radio button against an image in html?

问题描述

我有100x100的多个图像。我要求用户在他们每个人面前放一个单选按钮，选择其中一个。

这是代码：

 < div> 
< input type =radioname =picvalue =1/>< img src =pic01.jpg/>< br /> 
< input type =radioname =picvalue =2/>< img src =pic02.jpg/>< br /> 
 .... 
  

等等......但问题在于无线电按钮呈现在线条的底部，我想让它位于图像的垂直中间。我尝试过 style =vertical-align：middle，但它不起作用。

有什么想法？ / p>

解决方案

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

 < style type =text / css> 
 input [type =radio]，input [type =radio] + label img {
 vertical-align：middle; 
} 
< / style> 
 
< ul> 
< li> 
< input type =radioname =picid =pic1value =1/> 
< label for =pic1>< img src =pic1.jpgalt =pic 1/>< / label> 
< / li> 
< li> 
< input type =radioname =picid =pic2value =2/> 
< label for =pic2>< img src =pic2.jpgalt =pic 2/>< / label> 
< / li> 
< / ul> 
  

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?

解决方案

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>

这篇关于如何中间垂直对齐单选按钮的图像在HTML中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！