<分区>
<分区>
我们正在尝试并排放置多个 DIV。非常简单，只需使用 FLOAT 或 INLINE-BLOCK。两者的问题是您不能将 DIV 中的数据垂直居中。任何帮助，将不胜感激!需要在没有框架的情况下完成。
Some have suggested this article, but this does not take in to account two or more div's next to each other. 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>最佳答案
试试这个:
.file div
{width: 150px; height: 150px; float: left; padding: 7px; border: 1px solid #000;display: flex;
align-items: center;
justify-content: center;
}
关于html - 将多个 DIV 并排放置并垂直居中对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39875167/