Fieldset: Center Legend

Fieldset: Center legend

In HTML 5, the legend align attribute has been depreciated so here is how I did it.

Note that Bootstrap 4 (don't know about 3) completely hides a field set border and sets the legend width to 100%. So in addition to adding the width:auto, you would also have to use css to set the fieldset border if you want it to display.

legend {
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

for

<legend>Legend</legend>

Align fieldset legend at center

Add this CSS, remove margin :auto & left:40% then add margin-left:40%.

.Fieldset {  border: 1px solid #CCC;  border-radius: 5px;  padding: 10px;}
.Legend {  border: medium none;  margin-left: 40%;  padding: 0 10px;  position: relative;  text-align: center;  width: auto;  color: #3C6EAC;  font-size: 18px;  font-weight: bold;}

<fieldset class="Fieldset">  <legend class="Legend" id="Legend">Add</legend></fieldset>

How to center the legend element - what to use instead of align:center attribute?

Assuming your markup looks something similar to this:

<form>
<fieldset>
<legend>Person:</legend>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

Your CSS should look something like this:

legend {
    margin:0 auto;
}

that's easiest

Oh Dear... You have chosen probably the most difficult thing in CSS when it comes to cross-browser compatibility. Cameron Adams said it best

Probably the only difficulty in
styling semantic forms is the legend
tag. It is insufferably variable
across browsers. In Mozilla, the
legend tag is not left-indented from
the body of the fieldset, in IE and
Opera it is. In Mozilla, the legend
tag is positioned in between the
fieldset's border and its content, in
IE and Opera it is positioned inside
the content. This makes it very hard
to move the legend inside the fieldset
border, or position it flush to the
left of the fieldset, as you get
varying effects across browsers

You can read more about what he said at Fancy Form Design Using CSS on how to style forms.

My solution to the problem would be to remove the fieldset border completely and absolutely position the legend element. The problem with what you want to do is that it is different in every browser.

HTML Align LEGEND Center

The legend element properties can be modified via CSS just like any other element. Here's an example of a legend with 100% width, centred text and yellow background: http://jsfiddle.net/Y7DnS/1/

HTML

<fieldset>
    <legend>LOGIN</legend>
    <input type="submit" value="OK" name="submit" />
</fieldset>

CSS

fieldset { border: 1px solid grey; padding: 10px; }
legend {
    background: yellow;
    width: 100%;
    text-align: center;
}

Centering legend in Firefox

This solution uses a Firefox specific selector so we don't need to touch the styling for the other browsers. It uses absolute positioning but uses the transform property to center appropriately.

/* indended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}

<fieldset>
  <legend>Fix using absolute and transform</legend>
  <p>This seems to work a bit better.</p>
</fieldset>

Position legend on left/right of fieldset

There does not seem to be a plain-HTML way to do it. In the mean time, try this absolute positioning solution:

legend {
    position: absolute;
    top: 4px;
    left: -7px;
    width: 1ch;
    word-break: break-all;
    background-color: white;
}
fieldset{
  position:relative;
}

<fieldset>
  <legend> Hello </legend>
  <h1>Hello</h1>
</fieldset>

CSS: Can You positiion a legend inside a fieldset on the left border centered?

You can absolutely position the legend, and then use a transition to correct slightly. The CSS looks like this (left padding added to the fieldset so the content doesn't overlap the legend):

CSS

fieldset {
  position: relative;
  padding-left: 50px;
}

legend {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

HTML

<form action="test.php" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" id="radio"> <label for="radio">Click me</label>
    <div>
         <label for="name">Text Input:</label>
         <input type="text" name="name" id="name" value="" tabindex="1" />
    </div>
  </fieldset>
</form>

---

Related Topics