Images play a vital role in making or breaking the visual appearance of a website. Even after hopping onto some of the fine quality images, the inability to center the images can make your website look dull and boring. As per a global research, it has been found that centering images is much more complex as compared to aligning plain text. Through this blog, I'll be offering you a perfect guideline on centering an image using the HTML programming basics. So, let's move ahead to the steps involved with the same.
Step 1- Placing the “img” tag in the HTML file
As the very first step, you need to place the “img” tag in the HTML file where you want the image to be displayed on the web page. You need to place this tag in between the “body” tags and after the “h1” tags. Here's an example of how you need to place the “img” tag inside the HTML file:
<body>
<h1 style="text-align:center;">This is your text.</h1>
<img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" />
</body>
The above code defines an image named photo1.jpg, which is 270 pixels in width and 50 pixels in height.
<body>
<h1 style="text-align:center;">This is your text.</h1>
<img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" />
</body>
The above code defines an image named photo1.jpg, which is 270 pixels in width and 50 pixels in height.
Step 2- Now, define the space around the web page elements
As the second step, use the “margin” CSS attribute for defining the space around the page elements such as pictures, call-to-action buttons etc. Here, the “auto” value for the margin attribute indicates that the web browser would auto-detect the amount of space that's being consumed by the respective image/picture. The line of code <img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" /> represents the fact that the space around the respective image is being determined by the web browser.
height="50" /> represents the fact that the space around the respective image is being determined by the web browser.
Step 3- Define how the page element(here, I'm referring to the picture/image) is to be displayed
Now, use the “display” property for defining how the page element would be displayed. Here, the “block” value for the display indicates that the web browser would showcase the element as per its own preference, with a single space both, above and below it. In accordance to the code snippet mentioned within the step 1, the line <img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" /> can also be written as: <img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" style= “margin: auto; display:block;”> where the additional text “display:block” denotes that the image would be automatically placed on its own line.
height="50" /> can also be written as: <img src="photo1.jpg" alt="A description of the picture" width="270"
height="50" style= “margin: auto; display:block;”> where the additional text “display:block” denotes that the image would be automatically placed on its own line.
Step 4- View the web page(in which you've centered the image) in multiple browsers
As the final step, opt for viewing the web page in different web browsers for verifying whether the image has been centered properly or not. If you feel something is lacking with the placement of the image, you may choose to go back and rework on the settings.
Final Words
So, with that it's a wrap on this post that covers the basic steps of centering an image using the HTML programming concepts. Hope you'd have found the steps simple-to-follow and interesting enough for positioning your images towards the center of a web page(s).
This post is shared an copyright by WordPrax Ltd. - a PSD to Wordpress conversion service company having more than 4500+ clients on board.
No comments:
Post a Comment