title: Horizontally and Vertically Centering Text
body: <p>I want to vertically and horizontally centre some text in a div that contains to images beside it. So far I've only got it horizontally centred and am having troubling getting it vertically centred. I know there a lots of posts like this and mentioning some absolute positioning but every time I try it everything just overlaps. </p>
  
  <p>Heres the jsfiddle: <a href="https://jsfiddle.net/kkae9rzy/" rel="nofollow">https://jsfiddle.net/kkae9rzy/</a></p>
  
  <p>If you expand the result screen horizontally so that everything is on the same line(baseline) you will see that the text is not vertically centred.</p>
  
  <p>Heres the code for my css:</p>
  
  <pre><code>#titleheader{
     margin:auto;
     text-align: center;
     padding:100px;
     background:#f2f2f2;
  }
  
  #titleheader &gt; h1 {
     padding-left: 75px;
     padding-right: 75px;
     display:inline-block;
     font-family: "Bariol_Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
     color: #555;
     letter-spacing: 3px;
     font-size: 50px;
  }
  
  #wind{
     display:inline-block;
  }
  #intel{
     display:inline-block;
  }
  </code></pre>