Hypertext Markup Language (HTML) is the standard markup language for creating webpages and web applications. HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provide a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. If you are editing the HTML code for a webpage, you can try two types of text editing: HTML and Cascading Style Sheets (CSS). You can learn how to center text in HTML by learning basic HTML code and trying these methods.
To center text using HTML, you can use the <center> tag, or use a CSS property. The HTML center tag is easier as compared to the CSS text align. You can find out how to align your text using both these methods. Here’s how:
#1. The Basics
Firstly, you should know the basics of HTML. For example, a small "b" in a bracket is used to identify bold text. A small "i" is used to identify italic text. Learn about the various tags you can use to change the font or formatting of text.
(Image Courtesy: The Attitude Design)
#2. HTML Center Align
If you want to align your text using basic HTML then, look for the text that you want to be in the center of your homepage. Place the tag <center> before the start of the text. Do not place any spaces between the tag and the text. Then, place the tag </center> after the end of the text. Do not include any spaces again. Save your webpage. View it to make sure you have aligned the text properly. If this did not change the alignment of your text, then you are using a program, like HTML5 that uses CSS instead of HTML coding. Try the second method to correctly align the text.
(Image Courtesy: WikiHow)
#3. CSS Text Align
If HTML text align did not work, you can try CSS Text Align. CSS code is inserted above HTML code because the two markup languages work together. If you have only one or a few blocks of text you need to center-align, you can do so by adding the style attribute to the opening tag of the element and choosing the property "text-align." In the example below, it is added to the <p> tag:
<p style="text-align:center">Center this text!</p>
If you have many blocks of text you would like to center, you can use CSS inside <style></style> tags within the head section on the page or in an external style sheet to declare that every element is centered.
<style>
p {
text-align:center
}
</style>
The text will be centered within every set of <p></p> tags on the page. If you would like some paragraphs centered while others are not, you can create a style class as seen in the below code.
<style>
.center {
text-align: center
}
</style>
Once a class has been created, it can be applied to any HTML tag. For example, if you wanted the heading to be centered you could add class="center" to the <h1> or another heading tag.
Was this helpful? Let us know what you think of this in the comments sections below.
(Featured Image Courtesy: Site Point)
