title: Using vertical-align to vertically center a button within a div
body: <p>Goal is to center a button within a div, both horizontally and vertically. Horizontal has been dealt with, but having trouble with vertical align.</p>
  
  <p>From the <a href="http://www.w3schools.com/cssref/pr_pos_vertical-align.asp" rel="nofollow">w3schools page</a> on <code>vertical-align</code> it states that using <code>middle</code> has the following result:</p>
  
  <blockquote>
    <p>"The element is placed in the middle of the parent element"</p>
  </blockquote>
  
  <p>In my problem (<a href="https://jsfiddle.net/bhcoLg9h/2/" rel="nofollow">see jsFiddle here</a>) I have set the CSS of a button within the parent element (to the best of my knowledge) to be vertically aligned.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id='titleSection'&gt;
    &lt;div class='title-inner right quarter-width'&gt;
      &lt;form action='destroy.php' method='POST'&gt;
          &lt;button&gt;Log Out&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
    &lt;div class='title-inner left quarter-width'&gt;
      &lt;!--nothing--&gt;
    &lt;/div&gt;
    &lt;div class='title-inner center half-width'&gt;
          &lt;h1 class='centered-text'&gt;Title&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>* {
  font-family:'Arial', Arial, sans-serif;
  padding: 0;
  margin: 0;
  }
  
  h1 {
      padding: 2.1vh 0;
      font-size: 6vmin;
  }
  
  div#titleSection {
      width: 100%;
      height: 12vh;
      border: 2.5px solid #ff0fff;
  }
  
  div.title-inner {
      height: 100%;
      text-align: center;
      display:inline-block;
  }
  
  div.quarter-width { width: 25%; }
  div.third-width { width: 33.3%; }
  div.half-width { width: 50%; }
  
  div.left {
      float: left;
      background-color: rgba(255, 0, 0, 0.5);
  }
  
  div.center {
      float: center;
      background-color: rgba(0, 255, 0, 0.5);
  }
  
  div.right {
      float:right;
      background-color: rgba(0, 0, 255, 0.5);
  }
  
  .title-inner button {
      vertical-align: middle;
  }
  </code></pre>
  
  <p>Am I wrong to think that the parent element is the <code>title-inner</code> div?</p>
  
  <p>I have also tried setting the CSS to:</p>
  
  <pre><code>.title-inner form { vertical-align: middle; }
  </code></pre>
  
  <p>to no avail.</p>
  
  <p>To recap: All extra CSS and html shown in jsFiddle just to give most accurate idea of what I am trying to do - apologies if this is unnecessary but I'd rather leave it in to avoid losing track of where I am. End goal is simply to (vertically) center the <strong>Log Out</strong> button within the right-hand (blue) div.</p>