Question

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>

Answer 1

With your HTML and just this CSS, the three items will display together on one line:

.center h1 {display: inline;}​

Working demo: http://jsfiddle.net/jfriend00/yK7Qy/

FYI, I notice that you’re using the same id="title" in multiple places. That won’t work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".

---

It may be easier to just put all the text and image in one <h1> tag like this:

<div id="header-container">
    <header class="wrapper clearfix">
        <div class="center">
            <h1>
                <span class="title">First</span>
                <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
                <span class="title">Second</span>
            </h1>
        </div>
    </header>
</div>​

Demo here: http://jsfiddle.net/jfriend00/CHv4k/