title: Center contents of fluid middle div in three column layout
body: <p>I cannot for the life of me get the contents of the center div to align no matter what I try:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="content-controls"&gt;
      &lt;div class="content-controls-left"&gt;
          123
      &lt;/div&gt;
      &lt;div class="content-controls-middle"&gt;
          &lt;img src="logo.png"&gt;
      &lt;/div&gt;
      &lt;div class="content-controls-right"&gt;
          456
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.content-controls {
      width:100%;
  }
  .content-controls-left {
      float:left;
      width:50px;
  }
  .content-controls-right {
      float:right;
      width:35px;
  }
  .content-controls-middle {
      float:left;
      margin:auto 0;
  }
  </code></pre>
  
  <p>What I would like to happen is that the image in the middle column is always centred in content-controls-middle - I have tried suggestions in:</p>
  
  <ol>
  <li><a href="https://stackoverflow.com/questions/6810031/css-center-element-within-a-div-element">CSS: center element within a &lt;div&gt; element</a></li>
  <li><a href="https://stackoverflow.com/questions/19070474/how-do-i-put-3-divs-side-by-side-and-center-the-content-in-each-one">How do I put 3 div&#39;s side by side and center the content in each one</a></li>
  <li><a href="https://stackoverflow.com/questions/6826542/three-divs-next-to-each-other-with-fluid-horizontal-width">Three DIVs next to each other with fluid horizontal width</a></li>
  <li><a href="https://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div">Align image in center and middle within div</a></li>
  </ol>
  
  <p>and more but all to no avail - what am I doing wrong?</p>
  
  <p><a href="http://jsfiddle.net/8VS5U/" rel="nofollow noreferrer">http://jsfiddle.net/8VS5U/</a></p>