We are facing the challenge of aligning multiple DIVs side by side while centering the content vertically. Using FLOAT or INLINE-BLOCK makes it easy to place the DIVs alongside each other, but vertical alignment becomes a problem. Any suggestions on how to achieve this without relying on a framework would be greatly appreciated!
Some recommendations pointed to an article discussing vertical alignment within a single div element, but our scenario involves two or more divs placed 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>