How to Align Images with Paragraph Using CSS

It is an easy job to align images with in a paragraph tag on left or right or vertically middle, but some beginner level programmers find it difficult to position it correctly. Let’s take a look at how it can be done easily with CSS.

align-image-with-paragraph-css

Right Alignment

Assuming you have a paragraph tag with an image tag inside of it and a bunch of sentences like below. <img> is placed in the beginning of the paragraph tag.


<p><img src="image/path.jpg" class="align">Lorem Ipsum is simply dummy text of the printing and typesetting 
 industry. Lorem Ipsum has been the industry's standard dummy text ever 
 since the 1500s ...</p>

CSS

	
	p{
			margin-bottom:20px;
			font-size:14px;
			padding:0;
			text-align:justify;
		}
		img.align{
			border:1px solid #666;
			width:200px;
			float:right;
			margin: 0 0 5px 10px;
		}

float:left; is set to the image with the class name “align” in order to position it at the right end. Then using margin we can make sure it is not too close to the text.

Left Alignment

Consider the same paragraph as above. Now take a look at the CSS code below to align the same image to left.

CSS


		img.align{
			width:200px;
			float:left;
			margin: 0 10px 5px 0;
		}

Only the float and margin values have to be changed in order to align it to left side.

Middle Left Alignment

If you want to align images in somewhere in the middle right of the paragraph, place your <img> in the middle of the paragraph like this.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s … and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum…

CSS


img.align{
	width: 100px;
	float: left;
	margin: 5px 10px 5px 0;
}

Placement of the image tag is what matters in this type of alignment. Similarly, you also align this image to middle right using this CSS code.


img.align{
	width: 100px;
	float: right;
	margin: 5px 0 5px 10px;
}

If you want to keep your images in the same paragraphs you can do it by adding the code below. But it is recommended to let the image overflow to the next paragraph so that it will avoid the extra space between paragraphs.

Optional


		p:after{
			content:'';
			display:block;
			clear: both;
		}

See the demo page to understand it better.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

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