title: vertical-align: middle not working
body: <p>I have a section title which has a border on both left and right sides. Ideally, I'd like these to be vertically aligned. However, <code>vertical-align: middle;</code> isn't working and I'm not too sure why. Ideas?</p>
  
  <p>CSS</p>
  
  <pre><code>#save-the-date {
      margin: 0 auto;
      width: 960px;
  }
  
  #save-the-date #title {
      vertical-align: middle;
  }
  
  #save-the-date #title h2 {
      font-size: 165%;
      margin: 0 auto;
      width: 150px;
  }
  
  #save-the-date #title .left-border {
      float: left;
      background:url('img/border.png') repeat-x -10px 0;
      width:340px;
      height:3px;
  }
  
  #save-the-date #title .right-border {
      float: right;
      background:url('img/border.png') repeat-x -10px 0;
      width:340px;
      height:3px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="save-the-date"&gt;
      &lt;div id="title"&gt;
          &lt;div class="left-border"&gt;&lt;/div&gt;&lt;!-- end border --&gt;
          &lt;h2&gt;Save The Date&lt;/h2&gt;
          &lt;div class="right-border"&gt;&lt;/div&gt;&lt;!-- end border --&gt;
      &lt;/div&gt;&lt;!-- end title --&gt;
  &lt;/div&gt;&lt;!-- end save-the-date --&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/9MgdF.png" alt="enter image description here"></p>