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:

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).

---

---