How to Align Images with Paragraph Using CSS

来源:互联网 时间:1970-01-01

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.

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> <p><imgsrc="image/path.jpg"class="align">LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry'sstandarddummytexteversince the1500s...</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;} p{margin-bottom:20px;font-size:14px;padding:0;text-align:justify;}img.align{border:1pxsolid#666;width:200px;float:right;margin:005px10px;}

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;} img.align{width:200px;float:left;margin:010px5px0;}

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.

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's ... <img src="image/path.jpg" class="align"> and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum...</p> <p>LoremIpsumissimplydummytextoftheprintingandtypesettingindustry.LoremIpsumhasbeentheindustry's...<imgsrc="image/path.jpg"class="align">andmorerecentlywithdesktoppublishingsoftwarelikeAldusPageMakerincludingversionsofLoremIpsum...</p> CSS img.align{width: 100px;float: left;margin: 5px 10px 5px 0;} img.align{width:100px;float:left;margin:5px10px5px0;}

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

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

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;} p:after{content:'';display:block;clear:both;}

See the demo page to understand it better.