Skip to content

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.

<html>
    <head>
        <title>HTML Document</title>
    </head>
    
    <body>
        <h2>Tutorial</h2>
        <p style="text-align:center;">Center Text</p>
    </body>
</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 the center of 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;”

<html>
    <head>
        <style>
            #test {
                width: 200px;
                height: 200px;
                margin: 0;
                background-color: gray;
                color: white;
                display: flex;
                display: table-cell;
                vertical-align:middle;
            }
        </style>
    </head>
    
    <body>
        <h2>Tutorial</h2>
        <div>
        
        <p id="test">Center Vertical</p>
        <div>
    </div></div></body>
</html>

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.

<p style="text-align:right;">Right Text</p>
<p style="text-align:left;">Left Text</p>

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).

<p style="text-align:justify;">Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live"</p>


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.

<html>
    <style>
        .alignleft {
            float: left;
        }
    .alignright {
        float: right;
    }
    </style>
    <body>
        <h2>Tutorial</h2>
        
        <div id="textbox">
            <p class="alignleft">Text on the left.</p>
            <p class="alignright">Text on the right.</p>
        </div>
    </body>
</html>

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.

div.p1 {
  text-align: center;
}

div.2 {
  text-align: left;
}

div.p3 {
  text-align: right;
}

div.p4 {
  text-align: justify;
}

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

2 thoughts on “HTML Text align | Center, Right, Top, Bottom | Vertical Alignment”

Leave a Reply

Discover more from Tutorial

Subscribe now to keep reading and get access to the full archive.

Continue reading