How to specify the alignment of the Horizontal rule using HTML5 ?
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:
Please Login to comment...