需要帮助垂直居中两个元素
我需要将两个元素（一个 div 和一个标签）垂直居中。我已经进行了高低搜索并尝试使用各种修复（相对/绝对定位、显示：表格等），但我仍然无法让它按照我需要的方式工作。
问题在于标签中的图像不是固定的高度。最大值为 200x200，但也可能比该值更小。输入按钮的尺寸大约为16x16。
我可以对 HTML 的结构进行一些细微的更改，但由于它不是我的代码，所以我不能用它做太多事情。谢谢！
这是代码的精简版本：
<ul>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
</ul>
I need to vertically center two elements (a div and a label). I've searched high and low and tried using various fixes (relative/absolute positioning, display:table, etc.) but I still can't get this to work how I need it to.
The kicker is that the image in the label is not a fixed height. The maximum will be 200x200, but it could be smaller than that. The size of the input button is roughly 16x16.
I can make some slight changes to the structure of the HTML but as it's not my code I can't do much with it. Thanks!
Here's the stripped down version of the code:
<ul>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
<li>
<div>
<input type="radio">
</div>
<label>
<img>
</label>
</li>
</ul>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
li{ 宽度：100%; }li div{ 宽度: 100%;浮动：向左； }
li label{ float : left }
这个怎么样？
li{ width : 100%; }li div{ width : 100%; float : left; }
li label{ float : left }
How about this?
这应该会有所帮助：
“margin-bottom”是为了补偿 div 的基线将与图像的中间对齐的事实。
http://jsfiddle.net/mblase75/rwfrQ/
This should help:
The 'margin-bottom' is to compensate for the fact that your div's baseline will be aligned with the middle of the image.
http://jsfiddle.net/mblase75/rwfrQ/