How toTech

How to center an image/text in HTML?

Center Image text HTML: Image/Text alignment is an important factor in HTML. Although image/text alignment is not difficult it may sometimes be more complicated then you think. There are different ways to center your image/text in HTML. In this article we will get to know how to center an image/text in HTML.

Although HTML has been so successful in developing web pages and web applications it has been annoying sometimes with the deprecated tags. Because of the loose syntax and free of cost features HTML has made its mark with the user compatibility. To align your text/image to the center of a page you need to follow some HTML elements/attributes. Scroll down below to explore the main content.

Center Image/Text HTML

In this section, we will go through both the image and text centering in HTML. You can either use the conventional method to do so, or you can use CSS to align your image/text. First, let us go through how you can center your image in HTML.

How to center Image in HTML?

When coding your pages using HTML image alignment is an important task to learn. In this section we will learn how to center your image in HTML using CSS. Below are a few simple steps illustrated with an example to center your image using HTML.

Using CSS

Below are a few simple steps illustrated with an example to center your image in HTML using CSS.

1)Add HTML
Firstly you need to add the HTML of the respective image. Below is an example of an image which is to be aligned to center. Here is the HTML of that image.

<img src="paris.jpg" alt="Paris" class="center">

2)Add CSS
Now add CSS to your HTML. To center an image, set left and right margin to auto and make it into a block element. Below is a code to set your left and right margins.

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

Here is a full code of the above illustrated example.

<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device=width, initial-scale=1>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element. </p>

<img src="image_paris.jpg" alt="Paris" style="width:50%;">

</body>
</html>

Using Attribute

Using the image align attribute you can align the image to the center of your page.
Definition: The align attribute specifies the alignment of an image according to the surrounding element. The <img> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the image according to surrounding elements. The align attribute is deprecated, but still supported in all major browsers.

Syntax: The syntax of the image align attribute is as follows,

<img align="left|right|middle|top|bottom"> 

Here is the parameters description of the above syntax.

Value Description
leftAligns the image to the left
rightAligns the image to the right
middleAligns the image to the middle
topAligns the image to the top
bottomAligns the image to the bottom

Example: Here is an HTML code to align your image accordingly.

<DOCTYPE html>
<html>
<body>

<h1>The image attribute</h1>

<p><strong>Note:</strong> The align attribute is not supported in HTML5. Use CSS instead!</p>

<h2>align="bottom" (default):</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> This is some text.</p>


<h2>align="middle" (default):</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="middle"> This is some text.</p>

<h2>align="top" (default):</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="top"> This is some text.</p>

<h2>align="right" (default):</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="right"> This is some text.</p>

<h2>align="left" (default):</h2>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="left"> This is some text.</p>

</body>
</html>

When you run the code the output turns out to be as follows,

Image centering using attribute
Image alignment

In case if you want to add a link to an image in HTML you can refer to the highlighted link below this text.
How to add a link to an image in HTML

How to center text in HTML?

Now let us learn how you can center a text in HTML using CSS. Earlier the <center> tag is used to align text to center in HTML. It is no longer supported now because it has been deprecated. Explore the different steps involved in centering a text in HTML below.

Using CSS

Here are few steps on how you can center text using CSS.

  1. Open the file

    Firstly, open your file which contains the CSS styles. If you don’t have a separate file for your CSS, you’ll find the styles at the top of the HTML file between the “<style>” and “</style>” tags. If you don’t already have <style> and </style>
    tags, add them directly below <body> at the top of the file like this.

    <!DOCTYPE html>
    <html>
    <body>
    <style>

    </style>
    Open the file with CSS

  2. Create a class that centers text

    The <div> tag will tell your HTML document to refer a specified section of text, so you’ll create a class for that tag.Create a class that centers text

  3. Add the text-align property

    Type text-align: center; into the space between the two curly brackets in the div.a section. Add text align property

  4. Add the proper div tag to text that should be centered

    You’ll do this by placing the <div class=”a”> tag above the text you want to center and closing with a </div> tag below the text you want to center. Add proper div

  5. Use the div.a tag to center other areas

    To center another element (e.g., content between tags like <p></p>
    and <h2></h2>), type <div class=”a”> before the item, and </div>
    after it. Use div a tag

  6. Review your document

    Though the content will vary, your document should look something like this.Review your document

Using the Center tag in HTML

Here are a few steps you can rely on to center your text using the center tag in HTML.

1)Open HTML document
This tag is now obsolete. However, it may run on a few web browsers.

2) Find the text you want to center
Scroll down until you find the header, paragraph, or other text that you want to center.

Select the text you want to center
Find the text you want to center

3) Add <center tag>
Now, add the center tag to each side of the text.

Adding center tag

4) Review your HTML document
Review your HTML document. Your document might look like below depicted picture.

Review your document

Hence we have learned how we can make use of the HTML tags and CSS to center our text.
If you want to know how you can add a link in HTML you can refer to the highlighted link below this text.
How to add a link in HTML

FAQ’s

Before we conclude this article, let us go through some top relevant FAQ’s in regard to this topic. Scroll down below to know more,

How do you center text vertically?

1) Select the text that you want to center.
2) On the Layout or Page Layout tab, click the Dialog Box Launcher in the Page 3) Setup group, and then click the Layout tab.
4) In the Vertical alignment box, click Center.

How do you center text horizontally in CSS?

For vertical alignment, set the parent element’s width/height to 100% and add display: table. Then for the child element, change the display to table-cell and add vertical-align: middle. For horizontal centering, you could either add text-align:center to center the text and any other inline children elements.

How do I center my navigation bar?

Make your div container the 100% width. and set the text-align: element to center in the div container. Then in your <ul> set that class to have 3 particular elements:text-align:center; position: relative; and display: inline-block; that should center it.

To conclude: Hence, through this article we have learned how to center image/text in HTML using different methods and relevant examples. If you have any queries in regard to this topic comment them below in the comment section. Also, do share the content if you like it. For some more interesting and latest tech articles and tech news visit Morphigo.com and delve into most amazing stuff on the web. Cheers!

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close