Создание горизонтальных заголовков с использованием пробелов

Question

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

1. Первый включает вертикальное центрирование двух границ с среднего пролета 'Название'.
2. Второй имеет левую границу, расширяющую все до левого края div и наоборот для правого (очевидно, ширина пролетов должна быть изменена с оригинала).

Использование двух часов показалось хорошей идеей, но, возможно, это связано с чрезмерным взломом, чтобы сделать что-то настолько простое.

HTML

<div id="container"> 
    <div class="title"> 
     <span class="border"></span> 
     <span>Title</span> 
     <span class="border"></span> 
    </div> 
</div> 

CSS

#container {background: #eee; height: 100px; width: 100%;} 
.title {margin: 0 auto; text-align: center; margin-top: 20px;} 
.title span:nth-child(2) {padding: 0 10px;} 
.border {display: inline-block; width: 40px; background: #000; height: 1px;} 

Answer 1

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

Demo

Я сделал следующий пример с нуля, здесь, я использую :before и :after псевдо для создания виртуальных элементов, а затем я позиционируя их соответствующим образом с помощью position: absolute;, который установлен в top: 50; для вертикального центрирования, и затем вычитаю width каждого псевдо элемента, чтобы он не перекрывал ваше слово.

div { 
    margin: 150px; 
    position: relative; 
    float: left; 
} 

div:before, 
div:after { 
    content: ""; 
    width: 50px; 
    position: absolute; 
    top: 50%; 
    height: 1px; 
    background: #f00; 
} 

div:before { 
    left: -50px; 
} 

div:after { 
    right: -50px; 
} 

---

Как вы прокомментировали, если вы хотите, чтобы линии полностью расширяться от края до края .. чем обернуть текст в span и внести изменения, как показано ниже в вашем CSS

Demo 2(расширяет 100%)

<div><span>Hello</span></div> 

div { 
    text-align: center; 
    position: relative; 
} 

div span { 
    background: white; 
    position: relative; 
    z-index: 1; 
} 

div:before { 
    content: ""; 
    width: 100%; 
    position: absolute; 
    top: 50%; 
    left: 0; 
    height: 1px; 
    background: #f00; 
    z-index: 0; 
}