title: How to place image next to the text both centered in Foundation 5?
body: <p>I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is <a href="http://codepen.io/anon/pen/sIjfo" rel="nofollow">here</a>. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="panel small-12 column"&gt;
      &lt;div class="row"&gt;
        &lt;div class="small-5 column text-right"&gt;
          &lt;img src="http://placehold.it/60x60&amp;text=logo" /&gt;
        &lt;/div&gt;
        &lt;div class="small-7 column text-left"&gt;
          &lt;h1&gt;APP NAME&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In this example solution isn't ideal because it is not centered exactly especialy on the large screens. </p>
  
  <p>I've also tried something like this:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="panel small-12 column text-center"&gt;
        &lt;img src="http://placehold.it/60x60&amp;text=logo" /&gt;
        &lt;h1&gt;APP NAME&lt;/h1&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?</p>