5

The problem

The problem is that the following works in Chrome, Opera and IE (!?) but does not work in Firefox:

fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}
<fieldset>
  <legend>Legend</legend>
</fieldset>

Result in Chrome

Result on Chrome

Result in Firefox

Result on Firefox

Solutions Hacks

There are a few questions around but none have satisfying answers:

/* intended styling */
fieldset>legend {
    display: table;
    float: none;
    margin: 0 auto;
}

fieldset.absolute-fix {
    position: relative;
}
fieldset.absolute-fix>legend {
    position: absolute;
    left: 50%;
}

fieldset.margin-fix>legend {
    margin-left: 50%;
    margin-right: 50%;
    width: auto;
    transform: translate(-50%, 0)
}

fieldset.width-fix>legend {
    width: 100%;
    text-align: center;
}
<fieldset class="absolute-fix">
    <legend>Fix with absolute</legend>
    <p>Not centered and inconsitant styling</p>
    <a href="http://stackoverflow.com/a/4006871/1185053">Source</a>
</fieldset>

<fieldset class="attribute-fix">
    <legend align="center">Fix with attribute</legend>
    <p>Requires use of depreciated HTML and strongly ties presentation to content.</p>
    <a href="http://stackoverflow.com/a/19969606/1185053">Source</a>
</fieldset>

<fieldset class="margin-fix">
    <legend>Fix with margin</legend>
    <p>This is unsatisfying because there is a mis-aligned gap in the border and long legends go over several lines.</p>
</fieldset>

<fieldset class="width-fix">
    <legend>Fix with width</legend>
    <p>This is unsatisfying because there is a gaping hole in the border.</p>
</fieldset>

Question

Is there a way to constantly center legend in Firefox, whilst maintaining styling for other browsers?

Community
  • 1
  • 1
dav_i
  • 27,509
  • 17
  • 104
  • 136

2 Answers2

8

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>

Result in Chrome

Result in Chrome

Result in Firefox

Result in Firefox

Community
  • 1
  • 1
dav_i
  • 27,509
  • 17
  • 104
  • 136
  • Even simpler: `legend { text-align: center; }` for other browsers. By the way, your solution for Firefox is cross-browser, so you only need this one. (And you can also use `translateX(-50%)`.) – Géry Ogam Apr 26 '16 at 06:16
  • 1
    Ran this code snippet in firefox and doesn't appear to work anymore. – azulBonnet Feb 12 '18 at 17:47
0

It's 2023 and still firefox didn't fix this issue. (SO SAD)

Just wanted to give you guys what worked for me which is far simpler than mentioned solutions.

Using absolute positioning definitely works and is the best if you want to have full flexibility on the placement of the legend tag. However, In my case, I just wanted the legend to go to the right side of the fieldset. I did this:

.firefox-legend-fix {
  legend {
    margin-left: auto;
  }
}

Yes, I am aware that this does not directly answer the question but as this was the first hit on google, i decided to help others who are struggling with legend tag alignment in firefox

So, In order to center it you can do margin-inline: auto;

S.Mohammad Hn.
  • 77
  • 5