Question

我们正试图并排放置多个DIV。非常简单，只需使用FLOAT或INLINE-BLOCK。两者的问题是您无法将数据垂直居中在DIV中。任何帮助，将不胜感激！需要在没有框架的情况下完成。

有些人建议使用这篇文章，但这并没有考虑到彼此相邻的两个或多个div。 Vertical alignment of elements in a div

选项1：

<div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
</div>

选项2：

<div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
    <div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"><img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"></div>
</div>

Answer 1

如果只有一行文字，您可以为line-height: 150px

设置<div>

此外，您可以使用flex来轻松完成：

display: flex;
align-items: center;
justify-content: center;

Answer 2

试试这个：

.file div
{width: 150px; height: 150px;  float: left; padding: 7px; border: 1px solid #000;display: flex;
align-items: center;
justify-content: center;
}

DEMO HERE

将多个DIV并排放置并垂直对齐中间

2 个答案: