title: CSS: header and subheader vertically aligned with image
body: <p>I am trying to achieve similiar effect to this:</p>
  
  <p><a href="https://i.stack.imgur.com/cV30q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cV30q.jpg" alt="Example image"></a></p>
  
  <p>The header and its subheader are both vertically aligned to the image.</p>
  
  <p>I've written following code:<br>
  <a href="http://jsfiddle.net/u4zxn4eb/" rel="nofollow noreferrer">http://jsfiddle.net/u4zxn4eb/</a></p>
  
  <p><strong>It works but is it the best way to achieve this?</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
   &lt;h1&gt;
      &lt;a href="#"&gt;&lt;img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt=""&gt;&lt;/a&gt;
      &lt;div class="vertical_align"&gt;
          &lt;a href="#"&gt;Your company's name&lt;/a&gt;
          &lt;p&gt;Description&lt;/p&gt;
      &lt;/div&gt;
   &lt;/h1&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background: lightgrey;
  }
  .wrapper {
      background: grey;
      width: 100%;
  }
  h1 {
      font-size: 18px;
      margin: 0;
      position: relative;
      top: 35px;
  }
  .vertical_align {
      display: inline-block;
      vertical-align: middle;
  }
  img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
  }
  p {
      margin: 0;
  }
  </code></pre>
  
  <p><strong>EDIT</strong><br>
  As <em>@chrisbedoya</em> suggested I shouldn't put <code>div</code> inside <code>h1</code> tag.<br>
  Deleted.  </p>
  
  <p>Instead of using <code>h1</code> tag to position the whole, it's better to apply these rules separately:  </p>
  
  <pre><code>.vertical_align a, 
  .vertical_align p {
     position: relative;
     top: 40px;
  }
  </code></pre>