Positioning image next to centered text

Question

I'm having some trouble positioning my image next to my h1 . The h1 is centered, and I would like to have my image placed on the right side of it. However, The position of the h1 may not be changed (thus, the image may not affect the position of the h1 ).

Relevant code I have so far:

<div id="header">
    <h1>Header </h1><img src="pencil.jpg" alt="">
</div>



h1 {
    text-align: center;
    position: relative;
}

img {
    position: relative;
    top: 20px;
    left: 20px;
}

This code doesn't work at all; the image appears on the left side of the web page and is not being positioned relative to the h1 as I would like to.

I tried fixing this by putting the image into the h1 (to make it it's parent element), but by doing this the position of the h1 element changes (because the reserved space for the image is still preserved in the h1 element).

I hope someone can help me. Kind regards, Nick

Answer 1

That's because you're using a block level tag with another block level tag.

Check out W3 Schools for more info pertaining to inline VS. block level elements. :)

And if you want a more direct example using your code, here is a jsFiddle. This has it so the text is centered and the image is next to it, centered as well.

h1 {
    text-align: center;
    position: relative;
}

img {
    position: relative;
    top: 20px;
    left: 20px;
    display: inline-block;
}

Answer 2

One solution is to give #header position: relative and position: absolute to the img:

h1 {
    text-align: center;
    position: relative;
}
img {
    position: absolute;
    top: -80px;
    left: 60%;
}
#header {
    position: relative;
}

fiddle

Answer 3

You cannot absolutely position elements with position relative. You should use position absolute.

This wont resize very well though. Hope it helps. :)

img {
position: absolute;
right: 20px;
top: 0;
width: 100px;

}

Example

Answer 4

Since you want them right next to eachother...

Wrap the header text in a span.

<div id="header">
    <h1>
        <span>Header</span>
        <img src="http://placekitten.com/g/400/300" alt="" />
    </h1>
</div>

Set both the span and the image to display: inline-block;

h1 span, h1 img {
    display: inline-block;
}

If you want the text dead center then add some padding to the left, equal to the width of the image.

h1 span {
    padding-left: 36px;
}

h1 img {
    width: 36px;
}

Example 1

Alternatively

Put the image inside the span

<div id="header">
    <h1>
        <span>
            Header
            <img src="http://placekitten.com/g/400/300" alt="" />
        </span>
    </h1>
</div>

And set it to position absolute, so it hangs out the right hand side.

h1 {
    text-align: center;
    overflow: hidden;
}

h1 span {
    position: relative;
}

h1 img {
    position: absolute;
    right: -36px;
    width: 36px;
}

Example 2

Neither are perfect solutions, but hopefully one will be right for you. :)