Dennis Dennis - 2 months ago 8
CSS Question

Put Multiple DIVs Side-by-Side and Vertical Align Middle

We are trying to place multiple DIVs side by side. Very easy, just use FLOAT or INLINE-BLOCK. The issue with both is you cannot center the data inside the DIV vertically. Any help would be appreciated! Needs to be done without a framework.


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


Option 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>





Option 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

try this one:

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

DEMO HERE