How to Center The <Legend> Element - What to Use Instead of Align:Center Attribute

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 element in the center doesnt work in internet expl and firefox

add align="center" attribute to legend tag.

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>

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>

<legend> not centering in Firefox

It's easier than we thought.

It can be accomplished in all browsers using plain HTML.

 <legend align="center">Phone Directory</legend>

JSFiddle

Center a field set with CSS

There is no float: center, only left and right. Float simply allows block level elements to line up horizontally by taking them out of their stack flow. It's similar to display:inline-block except it aligns them to the direction of the float.

What you want is to set the margins to auto. If you want to center align the nodes inside the fieldset, you can add text-align:center; to this:

fieldset{
  border: 1px solid rgb(255,232,57);
  width: 400px;
  margin:auto;
}

How do I center this form in css?

Another way

body {    text-align: center;}form {    display: inline-block;}

<body>  <form>    <input type="text" value="abc">  </form></body>

How to align a <div> to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

Angular-ChartJS align legend right center

The answer is 'options['legendCallback']'

I pass the chart options to the canvas using the element attribute 'chart-options="$ctrl.options"'
disable legend in chart options '$ctrl.options['legend']['enabled'] = false'
create your own legend using '$ctrl.options['legendCallback']'

Example:

$ctrl.options['legendCallback'] = function(chart) {
    const text = []
    text.push('<div class="rr-doughnut-chart-legend">')
    // use dynamic legend id to handle multiple charts at once on one page
    text.push('<ul class="' + chart.id + '-legend">')

    // INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)

    text.push('</ul>')
    text.push('</div>')

    return text.join('')
}

How to Center The <Legend> Element - What to Use Instead of Align:Center Attribute