title: Center div on wrapping (when it doesn't fit on the line)
body: <p>I am trying to create this layout using only CSS:</p>
  
  <p><strong>When title fits:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/LYinRm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LYinRm.png" alt="sketch 1"></a></p>
  
  <p><strong>When title doesn't fit:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Jz81vm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Jz81vm.png" alt="sketch 2"></a></p>
  
  <p>The btn on the right should be centered if it wraps.</p>
  
  <hr>
  
  <p>I tried this:</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>.container {
      width: 100%;
      border: 1px solid grey;
      padding: 5px;
  }
  .block {
      padding: 5px;
      border: 1px solid orange;
      float: left;
  }
  .right-block {
      float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
      &lt;div class="block"&gt;Logo&lt;/div&gt;
      &lt;div class="block"&gt;Title that is too long&lt;/div&gt;
      &lt;div class="block right-block"&gt;right-btn&lt;/div&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But obviously, the btn is still on the right after it wraps. Any idea how to center it when it wraps ? And I'd like to avoid javascript.</p>
  
  <p>Fiddle here: <a href="http://jsfiddle.net/b7rvhwqg/" rel="nofollow noreferrer">http://jsfiddle.net/b7rvhwqg/</a></p>