Как сделать "фоновую линию" в стиле легенды fieldset для заголовка текста?

Question

Я пытаюсь стилизовать текст заголовка так, как ваш текст легенды по умолчанию отображается в наборах полей; то есть, я хотел бы, чтобы зачеркнутая строка подходила к тексту, но не проходила через него. Кажется, я не могу найти какую-либо информацию о том, как мне этого добиться, и, поскольку по многим другим вопросам Google всегда направлял меня в Stack Overflow для ответов, я подумал, что кто-то здесь сможет дать мне совет.

Для большей ясности. Я пытаюсь получить этот эффект на текст заголовка:

Текст заголовка по центру

Есть ли способ сделать это?

Answer 1

См .: http://jsfiddle.net/thirtydot/jm4VQ/

Если текст нужно обернуть, это не сработает. В IE7 не будет строки.

HTML:

<h2><span>Centered Header Text</span></h2>

CSS:

h2 {
    text-align: center;
    display: table;
    width: 100%;
}
h2 > span, h2:before, h2:after {
    display: table-cell;
}
h2:before, h2:after {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    width: 50%;
    content: ' ';
}
h2 > span {
    white-space: nowrap;
    padding: 0 9px;
}

Answer 2

Я придумал быстрое решение без изображений, которое, кажется, работает довольно хорошо в IE 8+ и других браузерах, в то время как в IE 6/7 изящно ухудшается:

<h1>CSS 2.1 EXAMPLE</h1>

h1 { position: relative; text-align: center; }
h1:first-line { background-color: white; }
h1:before {
    position: absolute;
    z-index: -1;
    content: '';
    left: 0px;
    right: 0px;
    height: 1px;
    top: 50%;
    background-color: black;
}

Это имеет следующие ограничения:

• Текст должен точно соответствовать общему цвету фона, иначе он будет выглядеть странно.
• Если вы хотите использовать какие-либо отступы для текста, вам нужно использовать неразрывные пробелы с обеих сторон текста (см. Демонстрацию).
• Текст заголовка всегда должен быть в одной строке (лучше всего работать при фиксированной ширине).

Вот демоверсия: http://jsfiddle.net/AndyE/3tFQJ/​

Answer 3

Поскольку flexbox поддерживается всеми последними браузерами, и прошло уже пять лет с тех пор, как автор упоминал о требовании IE8, я хотел повеселиться, создавая новое решение с использованием этого.

Разнообразие примеров усложняется:

https://jsfiddle.net/0mL79b4h/1/

https://jsfiddle.net/0mL79b4h/2/

CSS

div {
  display: flex;
  align-items: center;
}

div:before,
div:after {
  border: 1px solid #000000;
  border-radius: 2px;
  height: 2px;

  display: block;

  content: "";
  flex: 1;

  width: 100%;
}

h1 {
  text-align: center;

  margin: 8px;
}

HTML

<div>
  <h1>Example Text</h1>
</div>

<div>
  <h1>Multi-Line<br>Example Text</h1>
</div>

Плюсы:

• Использует flexbox!
• Супер простой HTML.
• Левая и правая стороны могут быть отрегулированы для асимметрии.
• Нулевые проблемы с фоном, отсутствие наследования цветов и т. Д.
• Ширина жидкости.
• Поддержка нескольких линий.
• Левое / Центральное / Правое / Пользовательское выравнивание: Просто отрегулируйте свойство flex отдельно для элементов до и после, более высокие числа выделят больше места для этой стороны. Удалите один полностью влево или вправо, выровняйте его.
• Интересные эффекты при игре со стилем границы (в этом примере я фактически выбрал круглую границу). Установите высоту 0px и используйте border-top вместо общей строки.

Минусы:

• Использует flexbox. Назовите меня ленивым, но я не включил обратную совместимость в этом примере, поэтому он будет выглядеть странно в браузере, который поддерживает элементы psuedo, но не поддерживает flexbox, хотя в последний раз я проверял, что это был Chrome (Firefox и т. Д.), которые все автоматически обновляются в любом случае. Возможно, захотите использовать Модернизр.

Answer 4

Вроде поздно на вечеринку, но это мое решение: https://jsfiddle.net/g43pt908/

Не требует изображений и не зависит от цвета фона.

HTML

<div class="hr-text">
    <span>Some text</span>
</div>

CSS

.hr-text {
    border-top: 1px solid #999;
    text-align: center;
    background-color: inherit;
}

.hr-text span {
    display: inline-block;
    position: relative;
    height: 14px;
    top: -12px;
    font-size: 14px;
    font-style: italic;
    color: #666;
    background-color: inherit;
    padding: 0 10px;
}

Answer 5

Вот что я использую на сайте клиента: http://jsfiddle.net/TPgE4/

Плюсы:

• Нет необходимости в изображениях - рендеринг мгновенно
• Использует заполнение для контроляпробел с обеих сторон текста
• Текст может быть выровнен по центру или выровнен по левому / правому краю - просто добавьте, например, определение стиля margin-left: 8px или margin-right: 8px в h2 span, чтобы он выглядел хорошо

Минусы:

• Требуется использование дополнительного тега, такого как <span>...</span> внутри тега заголовка
• Текст должен помещаться в одну строку для хорошего внешнего вида
• Цвет фона на <span> элементе должен соответствовать окружающему цвету фона, поэтому, если у вас есть не сплошное фоновое изображение, градиент или рисунок, он не будет идеально соответствовать

Answer 6

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

<h2><strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike>Your Text Here<strike>&nbsp;&nbsp;&nbsp;&nbsp;</strike></h2>

Вот как вы можете сделать это с помощью нескольких простых тегов и неразрывных пробелов.

Я бы использовал изображение иназывать это днем, но мне показалось, что это сработало:

CSS

  fieldset {
    border-right: 0px;
    border-left: 0px;
    border-bottom: 0px;
    width: 200px;
  }
  legend {
    margin: 0 25%;
  }

HTML

<fieldset>
  <legend>My Text Here</legend>
</fieldset>

Это единственный способ понять, как это сделатьэто с CSS.Обратите внимание, что ширина фиксирована.Еще раз я бы не стал делать это сам.

Answer 7

body { padding-top: 100px; }

div.parent {
    text-align: center;
    border-top: 1px solid #ccc;
}

div.parent div {
    display: inline-block;
    margin-top: -0.8em;
    padding: 0 0.5em;
    background: #fff;
}

<body>
    <div class="parent">
        <div>My Text Here</div>
    </div>
</body>

Это решение с изменяющейся текучестью, которое соответствует вашему дизайну и должно работать в IE7 (хотя я признаю, что не проверял).Есть несколько недостатков:

• Вы теряете семантику fieldset / legend.
• Вы не можете поместить прозрачный фон в текст.

Если вам не нужна гибкая ширина, решение onteria_, вероятно, будет лучшим выбором.

Answer 8

Это не очень хороший ответ, но я все равно его выкладываю.

См .: http://jsfiddle.net/rFmQg/

<h2><span>Centered Header Text</span></h2>

h2 {
    background: url(http://dummyimage.com/2x1/f0f/fff&text=+) repeat-x center;
    text-align: center
}
h2 span {
    background: #fff;
    padding: 0 9px
}

Мне это не нравится, потому что:

• Вы должны использовать изображение.
• Это. (работает, только если фоны совпадают)

Answer 9

Я не уверен, что это подойдет вам ...

h1:before, h1:after {
 content: " ------------- ";
}