All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Image Alignment In HTML

Last Updated : Jul 1, 2023

Image Alignment In HTML

In this tutorial we will show you the solution of image alignment in HTML and we are going to show you how you are able to align images in HTML.

It means that how you are able to position image at different places in website. let us understand how we can done this.

Step By Step Guide On Image Alignment In HTML :-

As, in our previous articles we already understand that how we can insert image in background and how to insert image in html etc. and today we will understand how we are able to align image in html.

For alignment of image in html we use align attribute in image tag. Let us understand this with the help of codes.

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
<img src=”1.jpeg” align=”left”>
<!-- to align images at left side of html page -->
<img src=”2.jpeg” align=”right”>
<!-- to align images at right side of html page-->
<img src=”3.jpeg” align=”top”>
<!-- to align images at top side of html page-->
<img src=”4.jpeg” align=”bottom”>
<!-- to align images at bottom side of html page-->
<img src=”5.jpeg” align=”middle”>
<!-- to align images at middle side of html page-->
</body>
</html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. Here, in body tag we create five different tags. All the tags are same but with some differences. Let us see them.
  5. In first we use 1.jpeg as source file and in align attribute we use left value. It means that the image got aligned to left side of html page.
  6. In first we use 2.jpeg as source file and in align attribute we use right value. It means that the image got aligned to right side of html page.
  7. In first we use 3.jpeg as source file and in align attribute we use top value. It means that the image got aligned to top side of html page.
  8. In first we use 4.jpeg as source file and in align attribute we use bottom value. It means that the image got aligned to bottom side of html page.
  9. In first we use 5.jpeg as source file and in align attribute we use middle value. It means that the image got aligned to middle side of html page.
  10. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion at last here we can say that with the help of this article we are able to align images in html. I hope this tutorial on image alignment in HTML helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪