Добавьте центрированный текст к середине <hr /> -подобной строки

Question

Мне интересно, какие параметры есть в строгом xhtml 1.0 для создания строки по обеим сторонам текста примерно так:

Section one
----------------------- Next section -----------------------
Section two

Я думал о некоторых причудливых вещах, подобных этому:

<div style="float:left; width: 44%;"><hr/></div>
<div style="float:right; width: 44%;"><hr/></div>
Next section

Или, наоборот, из-за вышеописанных проблем с выравниванием (как вертикальным, так и горизонтальным):

<table><tr>
<td style="width:47%"><hr/></td>
<td style="vertical-align:middle; text-align: center">Next section</td>
<td style="width:47%"><hr/></td>
</tr></table>

Здесь также есть проблемы с выравниванием, которые я решаю с помощью этого беспорядка:

<table><tr>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
<td style="vertical-align:middle;text-align:center" rowspan="2">Next section</td>
<td style="border-bottom: 1px solid gray; width: 47%">&nbsp;</td>
</tr><tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr></table>

В дополнение к проблемам с выравниванием оба варианта кажутся «нечеткими», и я был бы очень признателен, если бы вы случайно видели это раньше и знали об элегантном решении.

Answer 1

Как насчет:

<div style="width: 100%; height: 20px; border-bottom: 1px solid black; text-align: center">
  <span style="font-size: 40px; background-color: #F3F5F6; padding: 0 10px;">
    Section Title <!--Padding is optional-->
  </span>
</div>

Проверьте это JSFiddle .

Вы можете использовать vw или %, чтобы сделать его отзывчивым .

Answer 2

Способ решить эту проблему, не зная ширину и цвет фона, следующий:

Структура

<div class="strike">
   <span>Kringle</span>
</div>

CSS

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: red;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

Пример: http://jsfiddle.net/z8Hnz/

Двойная линия

Чтобы создать двойную строку, используйте один из следующих параметров:

1) Исправлено расстояние между строками

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    border-top: 4px double red;

Пример: http://jsfiddle.net/z8Hnz/103/

2) Пользовательский интервал между строками

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 5px; /* space between lines */
    margin-top: -2px; /* adjust vertical align */
    border-top: 1px solid red;
    border-bottom: 1px solid red;
}

Пример: http://jsfiddle.net/z8Hnz/105/

---

SASS (SCSS) версия

Основываясь на этом решении, я добавил SCSS "со свойством цвета", если это может кому-нибудь помочь ...

//mixins.scss
@mixin bg-strike($color) {

    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 

    > span {

        position: relative;
        display: inline-block;

        &:before,
        &:after {
            content: "";
            position: absolute;
            top: 50%;
            width: 9999px;
            height: 1px;
            background: $color;
        }

        &:before {
            right: 100%;
            margin-right: 15px;
        }

        &:after {
            left: 100%;
            margin-left: 15px;
        }
    }
}

пример использования:

//content.scss
h2 {
    @include bg-strike($col1);
    color: $col1;
}

Answer 3

Вы можете сделать это с помощью :: before и :: after, не зная ширины контейнера или цвета фона, и добиться большей стилизации разрывов строк. Например, это можно изменить, чтобы сделать двойные линии, пунктирные линии и т. Д.

JSFiddle

Использование CSS и HTML:

.hr-sect {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	color: rgba(0, 0, 0, 0.35);
	margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
	content: "";
	flex-grow: 1;
	background: rgba(0, 0, 0, 0.35);
	height: 1px;
	font-size: 0px;
	line-height: 0px;
	margin: 0px 8px;
}

<div class="hr-sect">CATEGORY</div>

Answer 4

Попробуйте это:

.divider {
	width:500px;
	text-align:center;
}

.divider hr {
	margin-left:auto;
	margin-right:auto;
	width:40%;

}

.left {
	float:left;
}

.right {
	float:right;
}

<div class="divider">
    <hr class="left"/>TEXT<hr class="right" />
</div>

Просмотр в реальном времени на jsFiddle .

Answer 5

Я только что столкнулся с той же проблемой, вот один из способов ее решения:

<table width="100%">
  <tr>
    <td><hr /></td>
    <td style="width:1px; padding: 0 10px; white-space: nowrap;">Some text</td>
    <td><hr /></td>
  </tr>
</table>​

Работает без установки фона для текстового элемента, то есть будет хорошо выглядеть независимо от того, какой фон скрыт за ним.

Вы можете попробовать это здесь: http://jsfiddle.net/88vgS/

Answer 6

Я не знаю, было ли это выяснено, но flexbox предлагает вполне подходящее решение:

<div class="separator">Next section</div>

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}
.separator::before, .separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #000;
}
.separator::before {
    margin-right: .25em;
}
.separator::after {
    margin-left: .25em;
}

См. http://jsfiddle.net/MatTheCat/Laut6zyc/ для демонстрации.

Сегодня совместимость не так уж и плоха (можно добавить все старые синтаксисы flexbox), и она изящно ухудшается.

Answer 7

ОБНОВЛЕНИЕ: Это не будет работать с использованием HTML5

Вместо этого, проверьте этот вопрос для получения дополнительной техники: Задача CSS, могу ли я сделать это, не вводя больше HTML?

---

Я использовал line-height:0 для создания эффекта в шапке моего сайта guerilla-alumnus.com

<div class="description">
   <span>Text</span>
</div>

.description {
   border-top:1px dotted #AAAAAA;
}

.description span {
   background:white none repeat scroll 0 0;
   line-height:0;
   padding:0.1em 1.5em;
   position:relative;
}

---

Еще один хороший метод на http://robots.thoughtbot.com/

Он использует фоновое изображение и плавает для достижения крутого эффекта

Answer 8

Если вы можете использовать CSS и готовы использовать устаревший атрибут align, будет работать стилизованный набор полей / легенда:

<style type="text/css">
fieldset { 
    border-width: 1px 0 0 0;
}
</style>

<fieldset>
<legend align="center">First Section</legend>
Section 1 Stuff
</fieldset>

<fieldset>
<legend align="center">Second Section</legend>
Section 2 Stuff
</fieldset>

Назначение набора полей - логическая группировка полей формы. Как указал Уиллер, стиль text-align: center не будет работать для элементов legend. align="center" не рекомендуется использовать HTML, но он должен правильно центрировать текст во всех браузерах.

Answer 9

Вы можете просто использовать относительное положение и установить высоту для родителя

.fake-legend {
  height: 15px;
  width:100%;
  border-bottom: solid 2px #000;
  text-align: center;
  margin: 2em 0;
}
.fake-legend span {
  background: #fff;
  position: relative;
  top: 0;
  padding: 0 20px;
  line-height:30px;
}

<p class="fake-legend"><span>Or</span>
</p>

Answer 10

<div style="text-align: center; border-top: 1px solid black">
  <div style="display: inline-block; position: relative; top: -10px; background-color: white; padding: 0px 10px">text</div>
</div>