title: How to center text vertically and horizontally in between floated button elements?
body: <p>I have a couple of buttons in a toolbar. They are floated to the left and right to give the middle-text 100% of the remaining width. Text could be one or two rows... </p>
  
  <p>My problem is that I need to center the text and position it in the middle vertically.</p>
  
  <p>MARKUP</p>
  
  <pre><code>&lt;div class="toolbar"&gt;
  &lt;div class="button left"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="button left"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="button left"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="button right"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;div class="button right"&gt;&amp;nbsp;&lt;/div&gt;
  &lt;span class="title"&gt;Start page title&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.left{
      float: left;
  }
  .right{
      float: right;
  }
  .toolbar{
      height: 70px;
      width: 500px;
      border: 1px solid red;
  }
  .button{
      width: 68px;
      height: 68px;
      border: 1px solid #fff;
      background: #666666;
  }
  .title{
      font-size: 12px;   
      line-height: 8px;
      vertical-align: middle;
      text-align: center;
  }
  </code></pre>
  
  <p>I do have a fiddle as well (click a gray button to try it with dual row text):
  <a href="http://jsfiddle.net/U7LhL/6/" rel="nofollow noreferrer">http://jsfiddle.net/U7LhL/6/</a></p>
  
  <p>Any ideas? Setting line height wouldn't work (unless using JS) since height of the text is unknown and i need to fit 2 lines. Using absolute positioned text to achieve this would make it pretty messy I think, if even possible.</p>
  
  <p><img src="https://i.stack.imgur.com/PC3We.png" alt="enter image description here"></p>