Question

我需要垂直居中两个元素（div和标签）。我已经搜索了高低，并尝试使用各种修复（相对/绝对定位，显示：表格等），但我仍然无法将其用于我需要它的工作。

踢球者是标签中的图像不是固定高度。最大值为200x200，但可能小于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>

Answer 1

li{ width : 100%; } li div{ width : 100%; float : left; } li label{ float : left }

这个怎么样？

Answer 2

这应该有所帮助：

img {
    vertical-align: middle;
    margin-bottom: .25em;
}

'margin-bottom'是为了补偿div的基线与图像中间对齐的事实。

http://jsfiddle.net/mblase75/rwfrQ/

需要帮助垂直居中两个元素

2 个答案: