Как центрировать элемент <legend> - что использовать вместо align: center attribute?

Что мне здесь не хватает?

Изменить, потому что это не работает в комментарии:

Ниже приведенное решение приводит к следующему:

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

но для чего я хочу:

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

Изменить # 2:

На основе отзывов до сих пор звучит так, как будто этот тег <legend> является проигрывающим предложением. Есть ли у кого-нибудь пример того, что они используют вместо этого - что-то похожее на более надежное?

Ответы

Ответ 1

Предполагая, что ваша разметка выглядит примерно так:

<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>

Ваш CSS должен выглядеть примерно так:

legend {
    margin:0 auto;
}

что проще всего

О, Дорогой... Вы выбрали, наверное, самую сложную вещь в CSS, когда речь заходит о совместимости между браузерами. Камерон Адамс сказал, что лучше всего

Вероятно, единственная трудность в стилизация семантических форм - это легенда тег. Это невыносимо переменная в браузерах. В Mozilla Значок легенды не имеет отступов от тело поля, в IE и Опера это так. В Mozilla легенда тег расположен между границы поля и его содержимого, в IE и Opera расположены внутри Контент. Это очень тяжело для перемещения легенды внутри набора полей границы или поместите его на слева от поля, так как вы получаете различные эффекты в браузерах

Вы можете узнать больше о том, что он сказал в Fancy Form Design с помощью CSS о том, как стилизовать формы.

Мое решение проблемы состояло в том, чтобы полностью удалить границу поля и полностью поместить элемент легенды. Проблема с тем, что вы хотите сделать, это то, что в каждом браузере оно отличается.

Ответ 2

Легенда может быть легко описана атрибутом html. Я нашел поиск.

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

Ответ 3

Легенды, как известно, устойчивы к стилю.

Одна вещь, которую вы можете сделать, это использовать элемент заголовка вместо легенды, поскольку это будет намного проще в стиле. Это делает то, что вы хотите в FF3 и Safari, по крайней мере.

    <!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>

Ответ 4

наконец, получил его без взлома align="center". используя только законные поля css

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

Ответ 5

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

(Ответчик затем бросает клавиатуру на пол, как микрофон)

Ответ 6

Вот с чего я пришел всего несколько минут назад. Это работает в Firefox и Chromium/Opera. Не тестировали в Edge и ранее IE-дерьмо, но, по моему опыту, тоже должны там работать.

Предполагая, что элемент формы внутри отображается как блок.

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;
}

Хитрость с легендой margin и процентами. margin: 0 34.6%; Теперь, если вы увеличиваете или уменьшаете прописку слева/справа или ширину, вам нужно будет пересчитать процент для левого/правого поля легенды, по-видимому. Не беспокойтесь, 0 автоматически. Это просто не сработает.

Ответ 7

Вы также можете реплицировать все выходные данные semantic_form_for как HTML, используя основной помощник рельсов. Поскольку вы знаете, что ожидаете, вы можете написать его без использования semantic_form_for. Мы делаем это в одном из наших проектов.

Ответ 8

Немного поздно выбрасывать альтернативу для этого? Во всяком случае, я хотел использовать набор полей и нашел отсутствие позиционирования легенды и отображения переменных браузером, раздражающим, поэтому я реплицировал пару 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>

Важные примечания к этому: необходимо установить внутреннюю ширину div, а оставшееся поле должно быть равно половине. Возможно, вам придется внести коррективы в ширину в зависимости от длины текста. Левый: 50% запускает его на полпути родителя, а отрицательное поле оставляет его половину ширины.

Ответ 9

Попробуйте этот код: -

<legend style="text-align:center;"> LEGEND TITLE </legend>

Вышеприведенный код содержит только компонент легенды в наборе полей и центрирует легенду с помощью встроенного CSS. То же самое можно сделать с помощью внешнего CSS или с помощью тега style.

Ответ 10

Вы можете использовать его как

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

Ответ 11

Используйте "margin-left" для легенды, чтобы переместить текст вправо.

  <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>