Here We can learn many things on this site in the near future we are going to share with most important educational knowledge and today here we are going to share with you a different method of HTML.
Overview
Today we are going to see correctly how we can center an I mage in HTML, If you are a beginner trying to learn HTML, and if dealing with image alignment seems like the biggest problem in your life, you are not alone. Many developers struggle with image handling in general, let alone image alignment. But you don’t have to worry because in this article we will show all the different methods which will answer the question.
Methods For How To Center An Image In HTML
We use <img> tags in HTML for adding images to our webpage, but the problem is that the <img> tag is an inline element which makes it difficult to align it that easily. We can use any of the following methods and perfectly center an image in HTML.
- We can use the text-align property of the style attribute and set it to center.
- We can align our image by converting it into a block-level element
- We can use the <center> tag to align one particular image.
Method 1 – Using the Style Attribute
We can center an image in HTML using the text-align property in the style attribute and setting it as the center. This will center everything inside the tag.
EXAMPLE OF HTML :
<!DOCTYPE html>
<html lang=”hi”>
<head>
<title>Centering an image in HTML using the Style Attribute</title>
</head>
<body>
<h1>Aligning an Image in center</h1>
<p>In this example, the image is wrapped in a block-type element, for ex. a div tag. The div is styled with the text-align property to center the image below. </p>
<!–Centered Image Start–>
<div style=”text-align: center;”>
<img width=”520″ src=”https://cdn.techie.com/photo/2018/06/011/00/26/web-design-3056983__569.jpg”>
</div>
<!–Centered Image End–>
<p>This is the simplest method.</p>
</body>
</html>
Method 2 – Converting the IMG Tag to a Block-Level Element
Another way to center an image in HTML is to convert the img tag which is an inline tag into a block-level tag. This can be done by setting the display property in CSS to block. Once that is done, We can simply set the margin property to auto, which divides all the space equally on the left and right sides of our image, centering it perfectly.
EXAMPLE OF HTML :
<!DOCTYPE html>
<html lang=”hi”>
<head>
<title>Centering an image in HTML by converting the `img` tag to a block-level element</title>
</head>
<body>
<h1>Centering an Image with the Display Property</h1>
<p>In this example, the CSS display properties are used to center the image below.</p>
<!–Centered Image Start–>
<img width=”500″ src=”https://cdn.techie.com/photo/2019/05/10/00/52/developer-3659825__856.png”>
<!–Centered Image End–>
<p>Once the display property is set to “block” and the image width to a fixed percentage, text-align property is set to center which will center align our image with respect to the viewport.</p>
</body> </html>
Method 3 : Using the <center> tag
If we want to center one particular image on the page, we can use the <center> tag. We can wrap the img tag inside the <center> tag, which will center that particular image.
NOTE: This method might not work on some browsers and is deprecated as it may have been removed from the relevant web standards or may be in the process of being removed.
EXAMPLE OF HTML:
<!DOCTYPE html>
<html lang=”hi”>
<head>
<title>Centering an image in HTML using the <center> tag</title>
</head>
<body>
<h1>Centering an Image with the center tag</h1>
<p>In this example, we will use the center tag to center align our image </p>
<!–Centered Image Start–>
<center><img width=”560″ src=”https://cdn.techie.com/photo/2020/09/07/26/04/website-4445869__569.jpg”></center>
<!–Centered Image End–>
<p>The image is wrapped in a center tag. Please note that this method might not work on some browsers so we advise you to not use this method unless all the other methods don’t work for you either.</p>
</body> </html>
Thank you sir for elaborate