title: how can i position text to either side of an image in html5
body: <p>I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so: <img src="https://i.imgur.com/ZdTdD.png" alt="header correct"></p>
  
  <p>as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.</p>
  
  <p>My current attempt looks like this:
  <img src="https://i.imgur.com/BGyel.png" alt="header incorrect"></p>
  
  <p>The image is not in between the words, even tho the order in the mark up is like so:</p>
  
  <pre><code>&lt;div id="header-container"&gt;
      &lt;header class="wrapper clearfix"&gt;
          &lt;div class="center"&gt;
              &lt;h1 id="title"&gt;First&lt;/h1&gt; &lt;img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /&gt; &lt;h1 id="title"&gt;Second&lt;/h1&gt;
          &lt;/div&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS:</p>
  
  <pre><code>.center { display: table; margin: 0 auto; }
  
  #title
  {
  padding: 20px;
  display: inline;
  font-size: 4.5em;
  border-top: 4px solid #5dc1c4;
  border-bottom: 4px solid #5dc1c4; 
  }
  </code></pre>
  
  <p>If anyone could explain why the text is not either side of the image that would be greatly appreciated.</p>
  
  <p>Thank you</p>
  
  <p>Edit:</p>
  
  <p>While the answer below is valid I actually solved this problem by putting the &lt; img > into the &lt; h1 > instead of having them separated, like so:</p>
  
  <pre><code>&lt;h1 id="title"&gt;First &lt;img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /&gt; Second&lt;/h1&gt;
  </code></pre>