HTML Text align | Center, Right, Top, Bottom | Vertical Alignment

HTML Text Align is required when you want a text presentation according to posing on any webpage. A Text Alignment can be Center, Right, Top, Bottom, Justify, or Vertical Horizontal. For HTML Text Alignment have to use a CSS style.

HTML Text align Center, Right, Top, Bottom, Justify, Middle Vertical alignment

This tutorial we will learn how to Align text and example on <p> and <div> tag in HTML.

HTML Text Alignment Code | Example

Use a style attribute in any tag to give alignment to it. See below HTML Text Alignment Code using an inline CSS. It’s just a simple demo of how to center the text in HTML.

Output:

 HTML Text Alignment Code example

HTML Text Align Center (Vertical | Horizontal)

You can set the HTML text-align middle on the webpage or Vertical center or horizontal center. Let’s see one by one example. (Note: Upper example is center the text for Vertical and Horizontal).

HTML Text align vertical center

Using Internal CSS and in <style> use 2 property- “display: table-cell;” and “vertical-align:middle;”

Output:

HTML Text Align Center (Vertical | Horizontal)

HTML Text Align Right and Left | <p> Tag

Same as above you have to use inline Css for html text-align Right and Left.

See the below example code.

HTML Text Align Justify | Look Good

If a text justified both on the left and on the right side then it is called Justify Text. Use “text-align: justify;” attribute to Justify. It will Stretch the sentence so that each line has an equal width (like in newspapers and books).


Question: How to Align Text side by side in HTML?

Answer: Use foot for it, first float leg and another to Right, see below example code.

Question: How to align text left center right same line HTML?

Answer: Use float the same as the above example, try by yourself. And do comment on the answer we will pick up the best one and update here.

HTML div Align | Center , Left, Right, Justify

You can use Internal or external CSS with class or id to align div elements. See the below codes.

Do comment if you have any doubts and suggestions with examples.

Note: The change HTML Text align Examples are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.