How to align images at your website?

Do you have a problem aligning images on your website? Using CSS alignment declaration could solve your problem! To display images according to your preferred alignment on your website, you can use float or text-align declaration in CSS. Let us look at how to use the float and text-align in more detail.

Float property in CSS will float an image to the left or right in the paragraph. The text in the paragraph will wrap around the image.

Text-align property in CSS will position an image to the left, center or right of the page. Accompanied text will act like a block, and place it before or after the image, depending on the chosen alignment.

 

---

Using Float property

When you want to wrap the text around an image just like a newspaper article, this property will float the image to the left or right in the paragraph. Furthermore, it will not create many white spaces.

(a) Float image to the left

<img src="image.jpg" alt="Sunflower" style="float: left; margin-right: 15px;">

 

(b) Float image to the right

<img src="image.jpg" alt="Sunflower" style="float: right; margin-right: 15px;">

 

---

Using Text-align property

Another way to align image to the left, centre or right of the page is to use the text-align property. The html code uses the <div> tag and inline CSS style. The following are examples of how to align an image to the left, centre and right.

(a) Left alignment

<div style="text-align: left;"><img src="image.jpg" alt="Sunflower"></div>

 

(b) Centre alignment

<div style="text-align: center;"><img src="image.jpg" alt="Sunflower"></div>

 

(c) Right alignment

<div style="text-align: right;"><img src="image.jpg" alt="Sunflower"></div>

 

---

Depending on your need, you can either use “float” or “text-align” property to align your image more effectively. To learn more about HTML & CSS coding, you can refer to books available in the Library.