title: Vertical align in header elements
body: <p>I know this got asked a lot here, but all the methods I am trying seem not to work for my code for some reason.</p>
  
  <p>I want to vertically align the text in the elements</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="mainWrapper"&gt;
      &lt;div id="header"&gt; 
          &lt;div id="logo" class="headerElements"&gt;
              &lt;h:outputText class="headerText" value="RedPrice" /&gt;
          &lt;/div&gt;
          &lt;div id="login" class="headerElements"&gt;
              &lt;h:outputText class="headerText" value="Login" /&gt;
          &lt;/div&gt;
          &lt;div id="register" class="headerElements"&gt;
              &lt;h:outputText class="headerText" value="Register" /&gt;
          &lt;/div&gt;
          &lt;div id="follow" class="headerElements"&gt;
              &lt;h:outputText class="headerText" value="Follow us" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>*{
      margin:0;
      padding:0;
  }
  
  body,html {
      height: 100%;
      font-family: 'Quicksand', sans-serif;
  }
  
  div#mainWrapper {
      height: 100%;
      width: 100%;
      background: url(../images/women.jpg) no-repeat center center;
  }
  
  div#header {
      width: 100%;
      height: 5%;
      background: white;
      opacity: 0.5;
  }
  
  div.headerElements {
      float: left;
      height: 100%;
      width: 10%;
      text-align: center;
  }
  
  div.headerElements:hover {
      background: orangered;
      opacity: 0.5;
  }
  
  .headerText {
      font-size: x-large; 
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/E7DAe/" rel="noreferrer">http://jsfiddle.net/E7DAe/</a></p>
  
  <p>What I have already tried: (unsuccesfully)</p>
  
  <ul>
  <li>setting line-height to 100% in headerElems</li>
  <li>setting <code>display: table-cell</code></li>
  <li>putting it into a <code>ul</code> and <code>lis</code> and setting display:table and display:table-cell</li>
  </ul>
  
  <p>Can somebody provide me with a solution?</p>