CODEWITHSUNDEEP
htmlcss
asfsadf
asfsadf

Reputation: 3862

How to center the <legend> element - what to use instead of align:center attribute?

What am I missing here?

Edit, because this doesn't work in a comment:

The below solution results in this:

----------------------------------------------------
|                                                  |
|                     Legend text                  |

but what I'm going for is:

----------------------Legend text-------------------
|                                                  |
|                                                  |

Edit #2:

Based on the feedback so far, it is sounding like this whole <legend> tag is a losing proposition. Does anyone have an example of what they use in lieu of this--something that has a similar appearance that is more reliable?

Upvotes: 14

Views: 52662

Answers (10)

Shilpa
Shilpa

Reputation: 1

Use "margin-left" to legend to move the text to right.

  <fieldset>
  <legend style="margin-left:3%;">Summary</legend>
  <div>
  The novella The Metamorphosis was written by Franz Kafka in 1912. It tells the story of the tragedy of a salesman, Gregor Samsa, who turned into a gigantic insect, but still possessed a human mind.</div>
  </fieldset>

Upvotes: 0

Lonnie Best
Lonnie Best

Reputation: 11444

legend
{
    margin-left: calc(50%);
    transform: translateX(-50%);
}

(Answerer then drops his keyboard on the floor, like a microphone)

Upvotes: 5

kunal
kunal

Reputation: 1

You can use it like 

<legend align="center"> your text here </legend>

Upvotes: 0

Accountant م
Accountant م

Reputation: 7533

finally got it without the align="center" hack. using only legal css margins

legend{
    width: 70px;
    padding: 2px;
    margin-left: calc(50% - 35px - 2px);
}

Upvotes: 5

Tom
Tom

Reputation: 2016

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.

Upvotes: 21

Spooky
Spooky

Reputation: 1316

Here is with what I came just a few minutes ago. This is working in Firefox and Chromium/Opera. Haven't tested in Edge and earlier IE-crap, but according to my experience, should work there as well.

Assuming that form element inside is displayed as block.

fieldset {
    border: 1px solid Olive;
    padding: 0.1%;
    margin: 1px auto;
    width: auto;
}

legend {
    font-size: 10px;
    text-align: center;
    padding: 0.2% 0.4%;
    width: 30%;
    margin: 0 34.6%;
    border: 1px solid DarkOrange;
    border-radius: 5px;
}

The trickery is with legend margin and percentages. margin: 0 34.6%; Now, if You increase or decrease padding left/right or width, You'll need to recalculate percentage for legend's left/right margin, apparently. Don't bother with 0 auto. It simply won't work.

Upvotes: 1

Akm Sadi
Akm Sadi

Reputation: 304

The legend can be styled by html attribute quite easily. I've found by searching..

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

Upvotes: 15

invertedSpear
invertedSpear

Reputation: 11054

Little late to throw out an alternative for this? Anyway, I wanted to use a fieldset and found the lack of positioning of the legend and the variable display by browser annoying so I replicated with a couple divs:

<div style="border:solid 1px #AAAAAA; position:relative; padding:10px;">
  <div style="position:absolute; top:-10px; left:50%; margin-left:-35px; width:70px; text-align:center; background-color:#FFFFFF;" >Legend</div>
  Stuff in your fieldset
</div>

The important notes on this: the inner div width must be set, and the margin left must be set to half. You may have to make adjustments to the width depending on the length of your text. The left:50% starts it at the halfway point of the parent and the negative margin left positions it back half it's own width.

Upvotes: 0

Victor Pudeyev
Victor Pudeyev

Reputation: 4538

You can also replicate whatever semantic_form_for outputs as HTML, using the very basic rails form helper. Since you know what you expect, you can write it out without the use of semantic_form_for. We are doing this in one of our projects.

Upvotes: 0

Mark Chorley
Mark Chorley

Reputation: 2107

Legends are notoriously resistant to styling.

One thing you can do is use a heading element instead of legend as that will be much easier to style. This does what you want in FF3 and Safari at least.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
h3{
background-color:#FFF;
margin: -1em auto 0;
text-align:center;
width:10%;}
</style>
</head>
<body>

 <form>
<fieldset>
<h3>Person:</h3>
Name: <input type="text" size="30" /><br />
Email: <input type="text" size="30" /><br />
Date of birth: <input type="text" size="10" />
</fieldset>
</form>

</body>
</html>

Upvotes: 4

Related Questions