Центрированный текст на горизонтальной линии в XHTML 1.0

Быстрый ответ

Для того, чтобы расположить текст поверх горизонтальной линии, используйте элемент span внутри div, форматируя стиль с помощью CSS. Примените свойства position: relative; и padding к тексту относительно верхней границы, которая будет выполнять роль линии. Вот как выглядит соответствующий код:

<div style="text-align: center; position: relative;">
  <span style="background: #FFF; padding: 0 10px; position: relative; top: -0.5em;">
    Центрированный текст
  </span>
  <hr style="border: 0; border-top: 1px solid #000; margin-top: -0.5em;"/>
</div>

Данный подход позволяет эффективно располагать текст по центру горизонтальной линии, создавая интересный визуальный эффект.

Революция Flexbox

Flexbox является настоящей находкой для адаптивного дизайна. Определите div в качестве контейнера и примените к нему свойства display: flex; justify-content: center; align-items: center; для создания гибкого и адаптивного дизайна:

<!-- Мечта любого CSS-разработчика -->
<div style="display: flex; justify-content: center; align-items: center; border-bottom: 1px solid #000; height: 50px;">
  <span style="padding: 0 10px; background-color: #FFF;">
    Центрированный текст
  </span>
</div>

Flexbox избавляет от необходимости манипулирования параметрами position или top, так как текст автоматически выравнивается.

Взаимодействие с псевдоэлементами

Дайте изящество вашему дизайну используя псевдоэлементы :before и :after внутри контейнера Flexbox. Задайте им свойство content в виде пустой строки и форматируйте их при помощи border-bottom, чтобы получить равномерные линии по бокам текста.

/* Flexbox творит чудеса с 2009 года */
.centered-text::before,
.centered-text::after {
  content: '';
  flex-grow: 1;
  background: #000;
  height: 1px;
  position: relative;
  top: .5em;
}

.centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

Этот метод гарантирует создание симметричной композиции с минимальной дополнительной разметкой.

Визуализация

Если у вас возникают сложности с визуализацией описанного, представьте следующую картину: вы едете по автостраде и видите дорожные знаки, расположенные между сплошными разделительными линиями.

Левая полоса (🛣️) || Правая полоса (🛣️)
         🚏
      "Текст"

|| символизирует горизонтальную линию, а 🚏 с "Текстом" изображает ваш центрированный элемент, гармонично вписанный в композицию страницы.

Советы от мастера

Сочетание div/hr

Перепробованный на практике метод сочетания div и hr обеспечивает удобство и гибкость при работе. Определяя ширину и позиционирование div, можно уверенно поместить текст в span в нужное место. Вот пример:

<!-- Достойно награды -->
<div style="text-align: center;">
  <span style="background-color: #FFF; padding: 0 5px;">Текст сюда</span>
  <hr style="border: none; border-top: 2px solid #000; margin-top: -10px;"/>
</div>

Подробнее об этом расскажет наш спикер на видео

Использование видимой ширины экрана

Для достижения адаптивности лучше всего использовать единицы измерения vw (видимая ширина экрана) и проценты (%). Таким образом, горизонтальные линии будут автоматически адаптироваться под размер экрана, обеспечивая правильное визуальное отображение.

.hr-text {
  width: 50vw; /* Подстраивается до полурасстояния ширины видимой области экрана, как воспитанный гость */
}

Абсолютная прецизиость с помощью позиционирования

Если требуется особо точный контроль над размещением текста, комбинация position: absolute; с параметрами left, right, top и bottom предоставит вам полный контроль. Задайте родительскому элементу свойство position: relative;, чтобы установить начальную координатную систему.

Искусство обрамления текста

Использование свойства float позволяет объединить текст, вложенный в элемент hr, образуя изящные сегменты линий, которые поддерживают текст. Не забудьте обнулить влияние плавающих элементов.

/* Плавающие элементы, которые функционируют безупречно */
.hr-left {
  float: left;
  width: calc(50% – 50px); /* Корректировка 50px под ширину текста */
}

.hr-right {
  float: right;
  width: calc(50% – 50px);
}

Полезные материалы

1. Центрировка в CSS: Полное руководство | CSS-Tricks — ускоряет процесс работы с центровкой в CSS.
2. ::before – CSS: Каскадные таблицы стилей | MDN — подробная информация о ::before, вашем секретном оружии.
3. text-align – CSS: Каскадные таблицы стилей | MDN — огляд возможностей горизонтального выравнивания текста.
4. Полное руководство по Flexbox | CSS-Tricks — отличный справочник по Flexbox, рекомендуется для приобретения необходимых навыков.
5. Блочная модель – W3.org — всесторонняя информация о блочной модели CSS, изложенная простым языком.
6. A List Apart – Для людей, создающих сайты — щедрый источник статей о веб-дизайне и форматировании элементов, в том числе горизонтальных линий.