In this tutorial, we’ll learn how to center text in the HTML. To align text in HTML, You may use HTML <center>
We’ll be covering the following topics in this tutorial:
Center Text in HTML Without Using CSS
Using HTML Center Tag
In HTML, the <center> tag doesn’t have particular attribute. But, it supports all HTML global attributes.
If you would like to align your text using HTML, put the <center> tag before beginning the content. After that, put the </center>
Here method describes how to use the HTML <center> tag, which can be currently obsolete. The following is the syntax of the <center> tag.
<center>center text html</center>
Your html code should look something like this:
<!DOCTYPE html> <html> <body> <h1><center>Welcome to Computer Notes</center></h1> <center>Center Text in html</center> <p1><center>html center text</center></p1> </body> </html>
Using HTML align Center Method
Again that was deprecated in HTML 4 and also won’t operate in HTML5.
<div align="center"> <p>html center align</p> </div>
To center text in an HTML using CSS Property.
Using inline CSS
The first method we’ll look using inline CSS directly into the HTML tags. Inline CSS signifies your HTML and CSS will put together in the body part of your HTML code.
It could achieve using the style tag within HTML. CSS code is added over HTML code since both markup languages work together.
This property is a substitute for the HTML align attribute. You can center text using CSS text-align property. HTML Text alignment utilizes to align the text (such as left, right, center, etc.).
The syntax for the text-align CSS property is:
To apply the text-align property, you need to define one out of six available values:
text-align: left | right | center | justify | initial | inherit
Check out an example of using CSS text-align below:
Example:
h1 { text-align: center; }
h2 { text-align: right; }
h3 { text-align: left; }
All the available properties for using text-align are explain in the table below:
| Value | Description |
| left | Text is left align div { text-align: left; } |
| right | Text is right align div { text-align: right; } |
| center | Text is center div { text-align: center; } |
| justify | Text is justify (ie: line up the left and right edges of the paragraph) div { text-align: justify; } |
| start | If direction is left-to-right, the text will be left align. If direction is right-to-left, the text will be right align. div { text-align: start; } |
| end | If direction is left-to-right, the text will be right align. If direction is right-to-left, the text will left align. div { text-align: end; } |
| inherit | Element will inherit the text-align from its parent element div { text-align: inherit; } |
Example of HTML Center Text Alignment:
<html>
<head>
<style>
h1 {text-align: center;}
p {text-align: center;}
</style>
</head>
<body>
<h1> How to center text in HTML </h1>
<p> align center html </p>
</body>
</html>
Example Explanation:
From the above, we’ve demonstrated an example of the HTML Center Text Alignment.
• Center attribute aligns the text to the center of the Webpage.
• It will help to align the heading into the center, which provides the better appearance of heading to the Webpage.
Centering a few blocks of text
In case you have just one or a couple of text blocks you want to center-align, you can do this by incorporating the style attribute to the opening tag of this element and deciding upon the property “text-align.” From the example below, it added to the <p> tag:
We can utilize style as an attribute and the text, which includes a string that needs to be aligned. Bear in mind; we’re still using the CSS attribute to align our text. The example code below shows how ‘style’ use inside the <p> tag. To align to the left or right, we can substitute the ‘center’ in text-align: center with left/right.
<p style="text-align:center">text align center</p>
Note that the value of the property “text-align” is set to “center” to signify the element is to center.
Multiple blocks of text
It could be more useful to style multiple blocks with one principle, Then use CSS inside <style></style> tags in the head area or an external style sheet. It is possible to either style the tag by tag name, class name, or id, as shown below.
<style>
/* styles by tags*/
p { text-align:center;}
</style>
The text in each set of <p></p> tags centered on the page. If You’d like any paragraphs centered, while some aren’t, you can create a style class, as noticed From the code below.
<style>
/* styles by class*/
.center { text-align: center }
</style>
If you are developing a center class, as shown in the example above, a paragraph could center using the code below, which”calls” the center class.
<style>
/* styles by id*/
#centerbyid { text-align:center;}
</style>
class="center" into the tag or a different heading tag.
Dinesh Thakur holds an B.C.A, MCDBA, MCSD certifications. Dinesh authors the hugely popular