CSS Positioning of image within text block

07 May, 2013 by Tom Elliott

Here’s an interesting CSS scenario I’ve come across a few times, positioning a custom image at either the beginning or end of a paragraph of text or heading. I don’t mean image wrapping, where the text wraps around an image that is floated to the left or right, I mean displaying an image right after the last character of a sentence or paragraph.

For example, consider the following – positioning custom graphics for quote marks around a block of text as illustrated below and in this demo:

CSS positioning of custom image within text

To get a custom image displaying at the end of text as shown above requires the below code:

The HTML

<div id="container">
    <h1><div id="contact-quote1"></div>Here are custom quote graphics
displayed at the beginning and end of this sentence,
positioned using CSS<div id='contact-quote2'></div></h1>
</div>

The HTML is straightforward – a containing div for the text and two div blocks for each quote within the h1 tag.

The CSS

#container {
	position:absolute;
	width:540px;
	background-color:#5B99F4;
	left:50%;
	margin-left:-270px;
	top:100px;
	padding:40px;

}
#container h1 {
	padding:0px;
	margin:0px;
	line-height:40px;
	color:#FFF;
	font-size:30px;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
}
#contact-quote1, #contact-quote2 {
	width:32px;
	height:24px;
	display:inline-block;
	margin-bottom:5px;
}
#contact-quote1 {
	margin-right:10px;
	background-image:url(quote-left.png);
}
#contact-quote2 {
	margin-left:10px;
	background-image:url(quote-right.png);
}

Again, not a lot to the CSS, we have styles for the container, the heading and the two custom image blocks for the quotation marks.

The key with the CSS required to get the image positioning to work involves the use of display:inline-block; – a CSS property that’s infrequently used (at least by me) and often overlooked. inline-block elements are displayed on the same line as adjacent content and by default, they align to the bottom of the element(s) they are next to. If you want to offset the graphic vertically, change the margin-bottom CSS style (positive or negative).



3 Comments

  • Eva says:

    Hi, thanks for this! It’s exactly the problem I’m trying to solve. I’ve followed your instructions but unfortunately I’m not having any luck making my image show up.

    I’m using this HTML:

    blablabla

    Where the CSS for the smiley is:

    div.smiley {
    display:inline-block;
    margin-left: 2px;
    background-image: url(img/wink.gif);
    }

    What else do I need? I don’t have any absolute positioning as in your container div, but I can’t tell from the post whether that part is necessary?

    • Tom Elliott says:

      Hi Eva, from first glance it looks like you missed the apostophies in the background-image, i.e. background-image: url(‘img/wink.gif’); If you’re still having problems, feel free to send a link and I’ll take a look 🙂

  • Mehdi says:

    Thanks ! This is perfect ! 🙂

  • Leave a Reply

    Your email address will not be published. Required fields are marked *

    css.php