title: Centering text in div while keeping a close button to the right side
body: <p>I want the "Find Tenant" to be <code>vertical-align:middle</code> and completely <code>center</code>. Even with the "X" icon to the far right side.</p>
  
  <p>But all I can get is this:</p>
  
  <p><a href="https://i.stack.imgur.com/ieypM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ieypM.png" alt="enter image description here"></a></p>
  
  <p>Here is my HTML</p>
  
  <pre><code>  &lt;div class="book-find-tenant-head"&gt;
        Find Tenant
        &lt;md-button class="md-icon-button" ng-click="ctrl.cancel()" style="float:right;"&gt;
          &lt;md-icon class="material-icons book-material" aria-label="Close"&gt;close&lt;/md-icon&gt;
        &lt;/md-button&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Here is my <code>book-find-tenant-head</code> class</p>
  
  <pre><code>.book-find-tenant-head {
      font-family: 'Roboto', 'Arial', 'sans-serif', 'Arial Narrow'; 
      font-weight:bold;
      text-align:center;
      font-size: 16px;
      font-weight: bold;
      display: inline-block; 
      vertical-align: middle;
      background-color: #337AB7;
      color:#FFFFFF;
      height:40px;
  }
  </code></pre>
  
  <p>Is this possible to do?</p>