how can i position text to either side of an image in html5

I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:

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.

My current attempt looks like this:

The image is not in between the words, even tho the order in the mark up is like so:

<div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
        </div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
</div>

Relevant CSS:

.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; 
}

If anyone could explain why the text is not either side of the image that would be greatly appreciated.

Thank you

Edit:

While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:

<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>