Ответ 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;
}

Ответ 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/

Ответ 3

Edit:

<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. Обратите внимание, что ширина фиксирована. Еще раз я бы этого не сделал сам.

Ответ 4

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

Плюсы:

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

Минусы:

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

Ответ 5

Поздно вечеринке, но это мое решение: 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;
}

Ответ 6

Если flexbox поддерживается всеми последними браузерами, и это составляет пять лет с тех пор, как автор IE писал об этом 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 и т.д.).), которые все автоматически обновляются в любом случае. Возможно, вы захотите использовать некоторые Modernizr.

Ответ 7

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

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

Ответ 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
}

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

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

Ответ 9

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_, вероятно, будет вашим лучшим выбором.