Fieldset: Center legend

css center legend fieldset
philkunz picture philkunz · Apr 30, 2014 · Viewed 19k times · Source

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?

Answer

Ming picture Ming · Apr 30, 2014

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

http://jsfiddle.net/ncv8H/

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

Related questions

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

I have a div tag with width set to 800 pixels. When the browser width is greater than 800 pixels, it shouldn't stretch the div, but it should bring it to the middle of the page.

Read More
How can I center an absolutely positioned element in a div?

I need to place a div (with position:absolute;) element in the center of my window. But I am having problems doing so, because the width is unknown. I tried this. But it needs to be adjusted as the width …

Read More
How do I center floated elements?

I'm implementing pagination, and it needs to be centered. The problem is that the links need to be displayed as block, so they need to be floated. But then, text-align: center; doesn't work on them. I could achieve it by …

Read More