我有多个 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"
但它不起作用。
有什么想法吗?
最佳答案
应用于内联元素时,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>
关于html - 如何将单选按钮与 html 中的图像中间垂直对齐?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1832016/