How to align an image in HTML?

In HTML, the align property and CSS styles can be used to align an image. But keep in mind that HTML5 deprecates the align attribute, so if you want more flexibility over alignment, use CSS. This is how to use both approaches:

1. You can use the align attribute directly within the <img> tag.

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

The “align” attribute can take the following values:
“left”: Aligns the image to the left.
“Right”: Aligns the image to the right.
“top”: Aligns the image to the top of the line.
“bottom”: Aligns the image to the bottom of the line.
“middle”: Aligns the image vertically in the middle of the line.

2. Using CSS:

you can use the float property or margin property to control its alignment.

<style>
.left-align {
float: left;
margin-right: 10px; /* Optional: Adds some spacing between the image and surrounding content */
}
.right-align {
float: right;
margin-left: 10px; /* Optional: Adds some spacing between the image and surrounding content */
}
</style>

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