How to place image next to the text both centered in Foundation 5?

Question

I'm trying to have image next to the headline in one row, both centered in Foundation 5. Example is here .

HTML

<div class="row">
  <div class="panel small-12 column">
    <div class="row">
      <div class="small-5 column text-right">
        <img src="http://placehold.it/60x60&text=logo" />
      </div>
      <div class="small-7 column text-left">
        <h1>APP NAME</h1>
      </div>
    </div>
  </div>
</div>

In this example solution isn't ideal because it is not centered exactly especialy on the large screens.

I've also tried something like this:

HTML

<div class="row">
    <div class="panel small-12 column text-center">
      <img src="http://placehold.it/60x60&text=logo" />
      <h1>APP NAME</h1>
    </div>
</div>

But it doesn't work: image isn't centered. What is the best way how to do this in Foundation 5?

Answer 1

Since an img is an inline element and h1 is a block element, you should put the image inside the heading. See the JSFiddle demo.

 <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.min.css" rel="stylesheet"/> <div class="row"> <div class="panel small-12 column text-center"> <h1><img src="http://placehold.it/60x60&text=logo" alt="" /> APP NAME</h1> </div> </div> 

Additionally, alt is a required attribute, so I've added one with a blank value.