Question

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

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

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

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

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

小提琴： 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个元素之间留下空格，虽然这是一种尴尬的方式但是如果你不想写那个裂缝然后你要调整宽度。

或

使用上述CSS代码
将li样式设置为display:table
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; }

希望这很清楚：）

Answer 2

Flexbox让这很容易。

使用以下命令将您想要垂直居中的子元素包装在包装div中：

.wpr {
    display:flex;
    align-items: center; /* align vertical */
}

<强> FIDDLE

浏览器支持在现代浏览器中很有用 - caniuse ..

但如果CSS3不是一个选项，那么display:table方法（如另一个答案中所述）就可以了。

垂直中心 - 高度未知

2 个答案:

Fiddle