How to center an image in HTML?

Aligning images in the correct position with respect to other content help you drive attention to the most important elements on your web page. There are different ways to do it when it comes to centering an image in HTML.

• Using the <style> attribute: If you use HTML5, use a style attribute and specify its value as text-align:center inside a block-level element.

Example:




<p style="text-align:center;"> 
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" alt="LambdaTest">
</p>



• Specifying the <img> element as block-level element: In this method, you can define the >img> element as a block-level element. See the below example.

Example:




<style type="text/css">
.centerImg
{
 text-align:center;
 display:block;
}
</style>




You can use the above method for multiple images.



• Using the <center> tag: Another way to center an image is to surround it with <center></center> tags. However, the <center> tag is not supported in HTML5. If none of those methods mentioned above work, you can use this one.

Example:




<center>
<img src="https://www.lambdatest.com/resources/images/logos/logo.svg" 
alt="what image shows" height="26" width="147">
</center>