4 Methods on How To Center an Image in HTML

If you are one of those who does not know how to center an image in HTML, this post can help you. Keep on reading and get the idea of using HTML in customizing the image on your web page. Although it might be confusing at first, we hope that you will familiarize it after reading this article. Learn from the guide we have provided below.

Visit The XAML Project for tech guides and tutorials.

Inserting the image on the correct location in a web page is necessary. It will help the people who searches the internet using an image to find what they are looking for. Some people uses the “reverse image search” to upload the picture and search for the results.

Technically, editing in HTML is different from block-level elements. In HTML, you need some coding skill which is not that hard to do.

So if you want to learn how you can center an image in HTML, keep on reading. Here, we will provide with easy methods which you can do on your own.

Center an Image in HTML

Method 1: Use <Center> Tags

If you want to use center tags, you need to enclose the image in the center tags. However, it does not guarantee that it will work on all web browser since it is already obsolete. You can do this method if you are using Google Chrome. To do that, you need to try the example code below.

<center>
<img src="image1.jpg" alt="centered image" height="120" width="280">
</center>

Method 2: Use align=middle Tag Attribute

The second one is also an obsolete method and will not work in HTML5. This method does not require CSS. If you are using an older version of HTML, this example might work for you.

<img align="middle" src="image1.jpg" alt="myprofile" />

Method 3: Convert to a block element

Using this method, you need to link an external CSS file. This method is usually used in centering multiple images.

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

Centered Image Code:

<img src="image1.jpg" class="centerImage" alt="CH profile" height="80" width="250"> 

Method 4: Horizontal and Vertical Image Centering

If you want to center the image vertically and horizontally, you can do that by following the code below.

<div class="verticalhorizontal">
    <img src="image1.jpg" alt="centered image" />
</div>

In Conlusion

That’s how you can easily center an image in HTML. Try it on your web page to know which works the best for you. In case you have questions and concerns, you may reach us through the comment box below. Feel free to send us a message and suggestion.