Fieldset: Center legend

问题:

as asked many times before (but never really answered) I want to center a legend in a fieldset.

The trick was done perfectly here, which I also bought for my project: http://themeforest.net/item/aloma-liquid-mobile-template/full_screen_preview/5819068

the code from the css reads like this

fieldset {
      display: block;
      margin: 20px 1%;
      margin-bottom: 20px;
      padding: 0 auto;
      padding: 15px 0;
      border: 0;
      border-top: 1px solid #DDD;
      width: 98%;
}

legend {
     display: table; 
     min-width: 0px;
     max-width: 70%;
     position: relative;
     margin: auto;
     padding: 5px 20px;
     color: #eee8aa;
     font-size: 20px;
     text-align: center;
}

But when I try to redo it in another page in my project, that doesn't use the theme, I fail. Am I missing something in the code above?

回答1:

The theme uses the code <legend align="center"> which fixes the Firefox issue:

http://jsfiddle.net/ncv8H/

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

回答2:

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>