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

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>

Br

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/

Alterant

now i'm wondering which is the better route to take: using class="title" with separate <h1> tags around an <img> or using one <h1> tag with <img> in the middle of the two words? – Br

@Br - It's probably easier to just put the whole line in just one h1 tag. Images are, by nature, already inline so they will just flow with the text. HTML was designed for inline images. You can see that version here: jsfiddle.net/jfriend00/CHv4k – Alterant

Answer 2

Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.

However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.

Mosasaur

ah! i was being really stupid. I wasnt actually putting the <img> inside the <h1> i was making two <h1>'s and putting it inbetween for no reason. thanks for making me realise this – Br

Answer 3

A slightly different approach, using spans, and only one h1 tag:

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

And I also changed some of the CSS:

.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}

Fiddle here ​

Ascarid