title: How to vertically center a group of bottom-aligned images?
body: <p>I have 3 squares, side-by-side of different heights. I want them to be bottom-aligned with each other, but I want the entire group center-aligned within a containing box.</p>
  
  <p>Seems like putting them in a wrapper whose style is <code>vertical-align:middle</code> should do it. But nope, it doesn't work.</p>
  
  <p>Any suggestions on how to do this?</p>
  
  <p><a href="https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview</a></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-css lang-css prettyprint-override"><code>#red {
    background-color: #FF0000;
    height: 20px;
    width: 20px;
  }
  #green {
    background-color: #00FF00;
    height: 60px;
    width: 60px;
  }
  #blue {
    background-color: #0000FF;
    height: 40px;
    width: 40px;
  }
  #container {
    width: 300px;
    height: 100px;
    border: thin solid black;
  }
  #wrapper {
    vertical-align: middle;
  }
  body {
    font-size: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;div id="container"&gt;
      &lt;div id='wrapper'&gt;
        &lt;img id="red" src=""&gt;
        &lt;img id="green" src=""&gt;
        &lt;img id="blue" src=""&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>