How to align image in Html

To align an image in HTML, you can use CSS styles or HTML attributes. Here are a few methods to align an image horizontally:

1. Using CSS with float property:

 <style>
   .image-left {
     float: left;
   }
   .image-right {
     float: right;
   }
 </style>

 <img src="image.jpg" alt="Image" class="image-left">
 <img src="image.jpg" alt="Image" class="image-right">

In this example, the CSS classes .image-left and .image-right are defined with the float property set to left and right respectively. These classes can be applied to the <img> element to align the image to the left or right.

2. Using the align attribute (deprecated in HTML5):

 <img src="image.jpg" alt="Image" align="left">
 <img src="image.jpg" alt="Image" align="right">

The align attribute is applied to the <img> element to specify the alignment. However, note that the align attribute is deprecated in HTML5, and it’s recommended to use CSS for styling instead.

3. Using CSS with margin property:

 <style>
   .image-left {
     margin-right: 10px;
   }
   .image-right {
     margin-left: 10px;
   }
 </style>

 <img src="image.jpg" alt="Image" class="image-left">
 <img src="image.jpg" alt="Image" class="image-right">

In this method, CSS classes are defined with the desired margin values to create spacing between the image and surrounding elements. These classes can be applied to the <img> element to align the image to the left or right.

Remember to replace "image.jpg" with the actual image source.

These methods can be used to align images within various HTML elements, such as <div>, <p>, or within the content of a text block. Adjust the HTML structure and alignment styles according to your specific needs.