Align fieldset legend at center

Question

HTML

<fieldset class="Fieldset">
    <legend class="Legend" id="Legend">Add</legend>
    ...

CSS

.Fieldset
{
    border: 1px solid #CCC;
    border-radius: 5px;
    padding: 10px;
}

.Legend
{
    border: medium none;
    left: 40%;
    margin: 0 auto;
    padding: 0 10px;
    position: relative;
    text-align: center;
    width: auto;
    color: #3C6EAC;
    font-size: 18px;
    font-weight: bold;
}

In Firefox legend gets aligned at center. But in Chrome it does not.

shakhrillo's answer is better overall and is the correct way to deal with it. There is no need to add `margin-left: 40%` because `text-align` will align it for you. It's only because you have `left: 40%` in there that stops the `text-align` from working correctly. — Ruddy, Apr 29 '14 at 07:34
Hmm, that's very odd. And you are correct, not sure why that is. I tend not to use Firefox anymore so that's why I missed it! In that case setting a margin is probably the next best way. — Ruddy, Apr 30 '14 at 07:11

score 2 · Accepted Answer · edited Jun 12 '19 at 19:44

Add this CSS, remove margin :auto & left:40% then add margin-left:40%.

.Fieldset {
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
}

.Legend {
  border: medium none;
  margin-left: 40%;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  color: #3C6EAC;
  font-size: 18px;
  font-weight: bold;
}

<fieldset class="Fieldset">
  <legend class="Legend" id="Legend">Add</legend>
</fieldset>

View on JSFiddle

score 2 · Answer 2 · edited Jun 12 '19 at 19:45

2

Simply delete left:40% from .Legend and text-align will do the rest.

.Fieldset {
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
}

.Legend {
  border: medium none;
  margin: 0 auto;
  padding: 0 10px;
  position: relative;
  text-align: center;
  width: auto;
  color: #3C6EAC;
  font-size: 18px;
  font-weight: bold;
}

<fieldset class="Fieldset">
  <legend class="Legend" id="Legend">Add</legend>
</fieldset>

View on JSFiddle

edited Jun 12 '19 at 19:45

showdev

28,454
37
55
73

answered Apr 29 '14 at 05:41

shakhrillo

37
5

1

This is a better answer (read more on my comment on the question). +1 from me. – Ruddy Apr 29 '14 at 07:35
Isn't firefox friendly. :( – azulBonnet Feb 12 '18 at 17:49

score 0 · Answer 3 · answered May 17 '19 at 22:54

0

margin:auto; is doing all the work
text-align:center; does not do anything
left:40%; interferes with margin:auto;

Run this example:

fieldset {
  border: 1px solid #CCC;
  border-radius: 5px;
  padding: 10px;
}

legend {
  margin: auto;
  padding: 0 10px;
  color: #3C6EAC;
  font-size: 18px;
  font-weight: bold;
}

<fieldset>
  <legend>Long title long title long title long title </legend>
</fieldset>

answered May 17 '19 at 22:54

ADJenks

2,973
27
38

Same question with good answer: https://stackoverflow.com/questions/7898072/center-a-field-set-with-css – ADJenks May 21 '19 at 16:42

score 0 · Answer 4 · answered Oct 26 '19 at 03:55

0

This post is useful. However, I managed to align the legend to the center just with text-align:center as shown below.

legend {
  text-align:center;
}

StackBlitz example for the same is here: https://stackblitz.com/edit/angular-nzmpzi

answered Oct 26 '19 at 03:55

javapedia.net

2,531
4
25
50

Align fieldset legend at center

4 Answers4