css - 垂直居中 - 高度未知

Question

我有两个并排的 div。左边是图像，右边是输入。

图像因用户上传的内容而异。

如何垂直居中对齐图像和输入？我希望输入显示在图像的垂直中心。

img 和输入都有自己的容器:

<div class="img-container">
<div class="data-container">

fiddle : http://jsfiddle.net/vbLht/

Answer 1

删除 float:left并尝试 display CSS 规则

.img-container {
    width: 50%;
    display:inline-block;
    vertical-align:middle;
}
.data-container {
    width: 50%;
    display:inline-block;
    vertical-align:middle;
}

Fiddle

注意:您需要设置 <!-- -->在内联 div 之后的标记，因为 css 内联规则将在 2 个元素之间留下空白，虽然这是一种尴尬的方式，但如果你不想写那个裂缝，那么你必须调整宽度。

或者

设置您的 li样式为 display:table使用上面的 CSS 代码

li{
     display:table; /*remove float*/
}
.img-container {
    width: 50%;
    display:inline-block;
    vertical-align:middle;
}
.data-container {
    width: 50%;
    display:inline-block;
    vertical-align:middle;
}

希望这是清楚的:)