Different ways to align an image

Different ways to align an image -

So, In this blog, I will tell you the different ways by which you can align an image by using HTML or CSS.

By using float property - 

You can use float property of CSS to align an image to left or right.

However, you cannot use float property to align an image to center. Use float:left to align an image to left and float:right to align an image to right.

for example, see the codepen below - 

Note - resize the codepen to 0.5* to see the effect.

 

By using Margin property - 

You can also use margin property of CSS to align the image in right, left or center.

Use margin-right:auto to align the image to left, margin-left:auto to align the the image to right and margin:auto to align the image to center. But before that, set the display property of all the images to block.

for example, see the codepen below - 

Note - resize the codepen to 0.25* to see the effect.

By using align attribute - 

You can also set the attribute of align of <div> element to left, center or right.

Use align="left" to align the image to left, align="center" to align the image to center and align="right" to align the image to right.

for example, see the codepen below - 

Note - resize the codepen to 0.25* to see the effect.

 

How to center an image - 

Images can also be center by using the following steps - 

1. Set the value of display property for an image to block.

2. Set the value of margin property for the image to auto.

3.Now, the image will be aligned to center.

for example, see the codepen below - 

Note - Resize the codepen to 0.5* to see the effect.

  
I hope you liked my blog on the article - "Different ways to align an image", if so, please like, comment, share and follow my blog to stay tuned with my articles. Thank you!