Open In App

How to specify the alignment of the Horizontal rule using HTML5 ?

Improve
Improve
Like Article
Like
Save
Share
Report

As we know that the HTML <hr> tag is used to insert a horizontal rule or a thematic break in an HTML page to divide or separate document sections. 

Approach: The task is to specify the alignment of <hr> element in HTML. This can be done by using the align attribute of <hr> tag in HTML document. It is used to set the horizontal line to left, right, and center. 

Syntax:

<hr align="left | center | right">

Example: Below code use to set the alignment of <hr> tag. 

HTML




<!DOCTYPE html>
<html>
  
<head>
    <style>
        h2
        {
            text-align:center;
        }
        h3
        {
            font-weight:bold;
        }
        .gfg 
        {
           text-align:right;
            font-weight:bold;
        }
        .gfg2
        {
            font-weight:bold;
            text-align:center;
        }
    </style>
</head>
  
<body>    
    <h2 style="color:green">GeeksforGeeks</h2>
    <h3>
        Horizontal rule set to left
    </h3>
    <hr width="300px;"
        size="10"
        align="left">
    <h3 class="gfg">
        Horizontal rule set to right
    </h3>
    <hr width="50%" align="right"
        size="10">
        <h3 class="gfg2">
            centered horizontal rule
        </h3>
      
    <hr width="50%"
        size="10"
        align="center">
</body>
  
</html>


Output:



Last Updated : 10 May, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads