title: Bootstrap how to get text to vertical align in a div container
body: <p>What is the best/proper way to vertically align the text in the middle of its column? The image height is statically set in the CSS.</p>
  
  <p>I have tried setting an outer div to <code>display: table</code> and an inner div to <code>display: table-cell</code> with <code>vertical-align: middle</code> but that didn't work either.</p>
  
  <p><img src="https://i.stack.imgur.com/xnpmF.png" alt="enter image description here"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;section id="browse" class="browse"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-5 col-sm-5"&gt;
                  &lt;h2 class="text-left"&gt;Link up with other gamers all over the world who share the same tastes in games.&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="col-md-1"&gt;&lt;/div&gt;
              &lt;div class="col-md-6 col-sm-7 animation_container"&gt;
                  &lt;img id="animation_img2" class="animation_img animation_img2" src="images/section2img2.png"/&gt;
                  &lt;img id="animation_img1" class="animation_img animation_img1" src="images/section2img1.png"/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.browse .container, .blind_dating .container { padding-bottom: 0; }
  .animation_container { position: relative; }
  .browse .animation_container { height: 430px; }
  .animation_img { position: absolute; bottom: 0; }
  .animation_img1 { right: 25%; }
  .animation_img2 { right: 25%; }
  </code></pre>