How To Center An Image In HTML

September 1, 2020 at 7:09 am By
How To Center An Image In HTML

A picture speaks a thousand words.

“Websites that use images well can sell a lifestyle, an ideal, an idea or whatever the product needs to sell more”, says ThoughtMechanics. Thus, while learning web development it is important to learn how to format images.

Images are the major ingredient of modern webpages. Without using them the page isn’t eye-catching. Using the right image to express adds value to the content of the page.

Aesthetic images are used as background images and informative images are used for products or services.

Thus, while learning web development it is important to learn how to format images. In this tutorial, we will learn how to add an image, background image & center-align image. So, before learning how to center an image, we will learn how to add an image.

How To Add An Image In HTML

The <img> tag is used to add images to webpages.

Here is the most basic <img> tag:

 <img src="insertimage.png" alt="How to add an image"/>

Out of the several attributes which are supported by <img> tag, only src and alt are required. The rest are useful but optional attributes.

The ‘src’ Attribute

The source attribute tells us where to fetch the image from. There are two different types of URLs you can give for source.

1. Path to an image file within your web site:

<img src="inserthtml.png" alt="Center align the image"/>

2. Path to an image file that is on the web anywhere in the world:

<img src="http://www.example.com/image-with-absolute-url.png" alt="How to add images"/>

The file format preferable for the images depends on the browser and not on the <img> tag, though general types include png, jpg, jpeg, svg, gif and bmp.

The ‘alt’ Attribute

alt represents alternate text for the image. It is useful to provide necessary information to the search engines. Assistive technologies like screen readers can use this to help the listener visualize the text flow.

The alt text will also be displayed on the screen when the browser is unable to load or find the source of the image. It is imperative to use the text which best describes the image.

<img src="image/tulips.png" alt="This is supposed to be an image of tulips"/>

The Height & Width Attribute

The display of our monitors and laptops are made up of millions of pixels. You may not find the image which fits on your web page perfectly. Yes, we can resize it. This gives the liberty to pick any picture and change the pixel size of it.

Let us see how to add the height and width attribute to an image.

<img src="html.png" alt="How to add an image"  height="180" width="250"/>

This can also be achieved by using CSS, though adding and removing images using HTML is easier.

How To Center Align An Image

The <center> tag which is now supported only in a few web browsers was earlier used to center align. The code for that is:

<center>
<img src="html.png" alt="How to add an image"  height="180" width="250"/>
</center>

Another feature that was available in older versions was using the middle tag attribute. Let us see how that worked:

<img align="middle" src="inserthtml.png" alt="Center align the image"/>

But with the latest version of HTML, center align is done with CSS. For this, first, add an image using HTML.

<p class="centeralign">
    <img src=" inserthtml.png" alt=" Center align the image " />
</p>

To this, you now need to add the CSS code for class “centeralign”. Let us see how that is done.

<style>
.centeralign 
{
    text-align: center;
}
</style>

The above code is pretty self-explanatory. To learn more about adding effects to images using CSS, you can check our blog!

How To Add A Background Image

Adding an amazing aesthetic to your website is inevitable and to do so one of the most basic ways is to add a background image. We can do this by building on what we have learned earlier.

We will use background attribute in the body tag and add a URL of the desired image. Remember, using the attribute in the body tag signifies we want the image on the entire page.

Let’s look at the code:

<html>
   <body background=“inserthtml.png”>
      <h1>Background image in HTML</h1>
      <p>How to add an image in HTML</p>
   </body>
</html>

We can also use the attribute style in tags such as <div>,<p>, etc. It can be used as

style="background-image: url('inserthtml.jpg');"

This will add the image only behind the content in these tags. You can try the above code using HTML Visual Studio.

How To Add Hyperlink To An Image

You can also add a hyperlink to an image. Let us see how you can do that:

<a href="https://inserthtml.com">
   <img src="html.gif" alt="add an image in HTML" width="90" height="110">
</a>

Conclusion

In this tutorial, we learned how to center an image in HTML, how to add a background image, and how to add a hyperlink to an image. It is important to note that the images added to a website should be small in size to keep the speed optimized. You can learn more about how larger images harm a website here!

Similar to images, you can also center text in HTML. Another responsive feature that can be added to a website is image and text sliders. To learn such other styling codes, subscribe to our blog!