title: Vertically center logo and title in HTML 5
body: <p>I am trying to create a responsive version of my portfolio website and I am nesting my logo image and title inside the header tag. The older version used divs to float the logo and title on the left and right sides of the header.</p>
  
  <p>Here is where I got stuck at when I tried to space the <code>img</code> and <code>h1</code> without using <code>divs</code>.
  The title is placed at the top right corner, but I don't know how to vertically center both <code>img</code> and <code>h1</code> without using the older methods.</p>
  
  <p><strong>Layout as of Now</strong></p>
  
  <p><img src="https://i.stack.imgur.com/C3Maw.gif" alt="Current Layout"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;header&gt;
      &lt;img src="images/logo.png" width="203" height="41" alt="logo for Design415.com" class="logo"&gt;
      &lt;h1 class="pagetitle"&gt;PORTFOLIO TITLE&lt;/h1&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>header {
      position: relative;
      width: auto;
      max-width: 900px;
      height: 60px;
      margin: 0 auto 20px auto;
      background-color: #333333;
      overflow: hidden;
  }
  
  .logo {
      position: absolute;
      left: 0;
      margin: 0;
  }
  
  .pagetitle {
      position: absolute; 
      right:0; 
      font-family: 'Century Gothic', Helvetica, sans-serif; 
      font-size: 1.40em; 
      font-weight: bold;
      margin: 0;
      color: rgb(240, 240, 240);
  }
  </code></pre>