How to Align <legend> Tag Text to Center ?
The <legend> tag is used to define the title for the child contents. The legend elements are the parent element. This tag is used to define the caption for the <fieldset> element.
The <legend> align attribute in HTML is used to specify the alignment of the caption in a <fieldset> element. The left and right alignment of <legend> element are supported by major browsers except Opera 12 and earlier versions. The bottom alignment are not supported by any browsers.
We can use CSS to align <legend> tag element to center. The CSS margin-left property will play the vital role here to center the legend element.
Below example implements the above approach:
Example:
html
<!DOCTYPE html> < html > < head > < title > How to Align legend Tag Text to Center? </ title > < style > form { width: 50%; } label { display: inline-block; float: left; clear: left; width: 90px; margin: 5px; text-align: left; } input[type="text"] { width: 250px; margin: 5px 0px; } .gfg { font-size: 40px; color: green; font-weight: bold; } legend { width: 70px; padding: 2px; margin-left: calc(50% - 35px - 8px); } </ style > </ head > < body > < div class = "gfg" >w3wiki</ div > < h2 >Centered Legend tag</ h2 > < form > < fieldset > < legend >STUDENT</ legend > < label >Name:</ label > < input type = "text" > < br > < label >Email:</ label > < input type = "text" > < br > < label >Enroll No:</ label > < input type = "text" > </ fieldset > </ form > </ body > </ html > |
Output:
Contact Us