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.
Below are a few simple steps illustrated with an example to center your image in HTML using CSS.
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">
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.
Here is a full code of the above illustrated example.
<meta name="viewport" content="width=device=width, initial-scale=1>
<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%;">
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,
Here is the parameters description of the above syntax.
|left||Aligns the image to the left|
|right||Aligns the image to the right|
|middle||Aligns the image to the middle|
|top||Aligns the image to the top|
|bottom||Aligns the image to the bottom|
Example: Here is an HTML code to align your image accordingly.
<h1>The image attribute</h1>
<p><strong>Note:</strong> The align attribute is not supported in HTML5. Use CSS instead!</p>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> This is some text.</p>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="middle"> This is some text.</p>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="top"> This is some text.</p>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="right"> This is some text.</p>
<p>This is some text. <img src="smiley.gif" alt="Smiley face" width="42" height="42"> align="left"> This is some text.</p>
When you run the code the output turns out to be as follows,
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.
Here are few steps on how you can center text using CSS.
- 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.
- 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.
- Add the text-align property
Type text-align: center; into the space between the two curly brackets in the div.a section.
- 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.
- 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>
- Review your document
Though the content will vary, your document should look something like this.
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.
3) Add <center tag>
Now, add the center tag to each side of the text.
4) Review your HTML document
Review your HTML document. Your document might look like below depicted picture.
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
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,
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.
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
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!
Thanks for your feedback!