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;">

Text from Wikipedia

 

(b) Float image to the right

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

Text from Wikipedia

 


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>

Image will follow the left alignment of text block.

 

(b) Centre alignment

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

Image will follow the centre alignment of text block.

 

(c) Right alignment

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

Image will follow the right alignment of text block.

 


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.