Centering Legends in Firefox

Question

Problem

The problem is that in Chrome, Opera and IE ^{_{(!?) The}} following works: it does not work in Firefox:

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

 <fieldset> <legend>Legend</legend> </fieldset> 

Result in Chrome

Result in Firefox

Hacks Solutions

There are several questions, but none of them have satisfactory 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 visit legend in Firefox, while preserving the style for other browsers?

Answer 1

This solution uses a special Firefox selector, so we don’t need to touch the style for other browsers. It uses absolute positioning, but uses the transform property for the corresponding center.

 /* 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 Firefox

Answer 2

Try the following:

  width: 100%; display: table-cell; text-align: center;