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

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

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

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

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

но я собираюсь:

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

Редактировать # 2:

На основе отзывов до сих пор звучит так, как будто этот

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

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

 
Person: Name:
Email:
Date of birth:

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

 legend { margin:0 auto; } 

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

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

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

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

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

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

 Legend 

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

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

  < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">      

Person:

Name:
Email:
Date of birth:

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

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

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

Вот с чего я пришел всего несколько минут назад. Это работает в 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: 0 34.6%; Теперь, если вы увеличиваете или уменьшаете отступ слева / справа или ширину, вам нужно будет пересчитать процент для левого / правого поля легенды, по-видимому. Не беспокойтесь 0 авто . Это просто не сработает.

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

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

 
Legend
Stuff in your fieldset

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

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

  LEGEND TITLE  

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

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

  your text here