Content

• Steps
• Method 1 of 2: CSS (Recommended)
• Method 2 of 2: The "align" attribute in HTML

Attribute align tag html> has been deprecated since HTML5. While this attribute still works in most web browsers, it is recommended that you align images using Cascading Style Sheets (CSS). In this article, we are going to show you how to center images using CSS and the deprecated tag. align.

Steps

Method 1 of 2: CSS (Recommended)

1. 1 Add HTML code for the image. You will use Cascading Style Sheets (CSS) to align the image, but you will need to place it on the page using HTML. Following is an example of using the tag img> to insert an image into your code:

   img src = "dog.webp" alt = "this is a picture of a dog">

   • Instead of dog.webp substitute the name of the image file, and after the "alt" enter the description of the image. Meaning center for "class" do not change, because you will create a CSS class with that name.
2. 2 Find the CSS code. If your site has a separate CSS file, open it. If not, the CSS is most likely at the top of the HTML file, inside the tags head>... Scroll to the top of the file to find tags style> / style>.
   • If tags style> / style> no, add them. Read this article for more information.
3. 3 Add CSS to align the image. Instead of 50%, you can enter a different value to make the image appear on the page. You won't be able to center the image with a value of "100%", so this number should be different.

   .center {display: block; margin-left: auto; margin-right: auto; width: 50%; }

4. 4 Save your changes. Save the HTML file and CSS file (if any). This will center the image.
   • Also inside tags img> can add to center other images.

Method 2 of 2: The "align" attribute in HTML

1. 1 Create a new paragraph. Although this method of centering images has been deprecated, it still works in many browsers. However, we recommend using CSS to keep the site functional when browsers stop supporting the specified attribute. Remember that the attribute align will center the picture only inside the element that surrounds it (for example, inside tags p> / p> or div> / div>). As an example, in the HTML file, we will create a new paragraph by adding p> on a separate line.
2. 2 Add HTML code for the image. Enter the following code after the tag p>... Use this example as a guide:

   p> img src = "dog.webp" alt = "picture" align = "middle">

   • Instead of dog.webp substitute the name of the image file, and after the "alt" enter the description of the image.
   • The middle attribute tells the browser to display the picture in the center of the page.
3. 3 Close the paragraph tag. To do this, add / p> after the picture tag. The finished code should look something like this:

   p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

4. 4 Save your changes. This will center the image.