Put Multiple DIVs Side-by-Side and Vertical Align Middle
<p>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.</p>

<blockquote>
  <p>Some have suggested this article, but this does not take in to account two or more div's next to each other. <a href="https://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div">Vertical alignment of elements in a div</a></p>
</blockquote>

<p><strong>Option 1:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"&gt;&lt;img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"&gt;&lt;/div&gt;
    &lt;div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; float: left; padding: 7px; border: 1px solid #000;"&gt;&lt;img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><strong>Option 2:</strong></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"&gt;&lt;img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"&gt;&lt;/div&gt;
    &lt;div style="width: 150px; height: 150px; text-align: center; vertical-align: middle; padding: 7px; border: 1px solid #000; display: table-cell;"&gt;&lt;img style="max-width: 100%; max-height: 150px; border: 0;" src="http://unsplash.it/150/100?random" alt="Gaslight" width="150" border="0"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>