title: How to keep TwentyTwenty.js images in center?
body: <p>I would like to use <a href="http://zurb.com/playground/twentytwenty" rel="nofollow noreferrer">TwentyTwenty.js</a> code for comparing images. It all works great except the images are aligned to the left side. How can I keep them in center without explicitly setting width on container? </p>
  
  <pre><code>&lt;div id="beforeafter" class="twentytwenty-container"&gt;
    &lt;img src="https://lorempixel.com/800/300/sports/2/"&gt;
    &lt;img src="https://lorempixel.com/800/300/sports/3"/&gt;
  &lt;/div&gt;
  
  $(window).load(function() {
    $("#beforeafter").twentytwenty();
  });
  </code></pre>
  
  <p><a href="http://codepen.io/anon/pen/EmEYjQ" rel="nofollow noreferrer">http://codepen.io/anon/pen/EmEYjQ</a></p>
  
  <p>If I set fixed width on container the images are in center, but I would prefer that images aren't restricted to width, with exception that they aren't wider than screen</p>
  
  <p>If I use flex centering than the handle isn't in center</p>
  
  <pre><code>  display: flex;
    justify-content: center;
  </code></pre>