How to Align <legend> Tag Text to Center ?
Last Updated :
05 Nov, 2021
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" >GeeksforGeeks</ 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:
Share your thoughts in the comments
Please Login to comment...