CSS-техника для горизонтальной линии со словами посередине

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

h1 {
  overflow: hidden;
  text-align: center;
}

h1:before,
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
  width: 50%;
}

h1:before {
  right: 0.5em;
  margin-left: -50%;
}

h1:after {
  left: 0.5em;
  margin-right: -50%;
}

<h1>Heading</h1>
<h1>This is a longer heading</h1>

Я тестировал его в IE8, IE9, Firefox и Chrome. Вы можете проверить это здесь http://jsfiddle.net/Puigcerber/vLwDf/1/

хорошо, этот более сложный, но он работает во всем, кроме IE

<div><span>text TEXT</span></div>

div {
    text-align: center;
    position: relative;
}
span {
    display: inline-block;    
}
span:before,
span:after {
    border-top: 1px solid black;
    display: block;
    height: 1px;
    content: " ";
    width: 40%;
    position: absolute;
    left: 0;
    top: 1.2em;
}
span:after {
   right: 0;  
   left: auto; 
}

The :before and: after элементы расположены абсолютно так, что мы можем тянуть один влево и один вправо. Кроме того, ширина (40% в этом случае) очень зависит от ширины текста внутри.. нужно подумать над решением этой проблемы. По крайней мере top: 1.2em гарантирует, что линии остаются более или менее в центре текста, даже если у вас разный размер шрифта.

Это кажется, работает хорошо, хотя:http://jsfiddle.net/tUGrf/3/

еще один способ:

span:after,
span:before{
    content:"a0a0a0a0a0";
    text-decoration:line-through;
}

<span> your text </span>

вот решение на основе Flex.

HTML-код:

<h1>Today</h1>

CSS:

h1 {
  display: flex;
  flex-direction: row;
}
h1:before, h1:after{
  content: "";
  flex: 1 1;
  border-bottom: 1px solid #000;
  margin: auto;
}

JSFiddle: https://jsfiddle.net/yoshiokatsuneo/3h1fmj29/

для более позднего (nowdays) браузера,display:flex andd pseudo-elements позволяет легко рисовать . border-style, box-shadow и даже background помогает тоже для макияжа.

h1 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h1:before, h1:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h1>side lines via flex</h1>

<div><span>text TEXT</span></div>

div { 
  height: 1px; 
  border-top: 1px solid black; 
  text-align: center; 
  position: relative; 
}
span { 
  position: relative; 
  top: -.7em; 
  background: white; 
  display: inline-block; 
}

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

пример:http://jsfiddle.net/tUGrf/

.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">Text</div>

Я искал некоторые решения для этого простого украшения, и я нашел довольно много, некоторые странные, некоторые даже с JS, чтобы рассчитать высоту шрифта и бла, бла, бла, затем я прочитал один на этом посту и прочитал комментарий от thirtydot говоря о fieldset и legend а я думал, что это было.

Я переопределяю эти 2 стиля элементов, я думаю, вы можете скопировать стандарты W3C для них и включить его в свой .middle-line-text класс (или как вы это называете), но это то, что я сделал:

<fieldset class="featured-header">
    <legend>Your text goes here</legend>
</fieldset>

<style>
.featured-header{
    border-bottom: none;
    border-left: none;
    border-right: none;
    text-align: center;
 }

.featured-header legend{
    -webkit-padding-start: 8px; /* It sets the whitespace between the line and the text */
    -webkit-padding-end: 8px; 
    background: transparent; /** It's cool because you don't need to fill your bg-color as you would need to in some of the other examples that you can find (: */
    font-weight: normal; /* I preffer the text to be regular instead of bold  */
    color: YOU_CHOOSE;
}   

</style>

вот скрипка:http://jsfiddle.net/legnaleama/3t7wjpa2/

я играл со стилями границы, и он также работает в Android ;) (протестировано на kitkat 4.XX)

EDIT:

следующая идея Bekerov Артур, который является слишком хороший вариант, я изменил .png base64 изображение для создания Штриха с помощью .SVG, чтобы вы могли отображать в любом разрешении, а также изменять цвет элемента без какого-либо другого программного обеспечения :)

/* SVG solution based on Bekerov Artur */
/* Flexible solution, scalable, adaptable and also color customizable*/
.stroke {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='1px' height='1px' viewBox='0 0 1 1' enable-background='new 0 0 1 1' fill='%23ff6600' xml:space='preserve'><rect width='1' height='1'/></svg>");
background-repeat: repeat-x;
background-position: left;
text-align: center;
}
.stroke h3 {
background-color: #ffffff;
margin: 0 auto;
padding:0 10px;
display: inline-block;
font-size: 66px;
}

решение для IE8 и новее...

вопросы, которые стоит отметить:

используя background-color маскировать границу может быть не лучшим решением. Если у вас есть сложный (или неизвестный) цвет фона (или изображение), маскировка в конечном итоге потерпит неудачу. Кроме того, если вы измените размер текста, вы заметите, что белый цвет фона (или что бы вы ни установили) начнет покрывать текст в строке выше (или ниже).

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

устранение:

(посмотреть JSFiddle)

вместо "маскировки" границы с background-color используйте свой display свойство.

HTML-код

<div class="group">
    <div class="item line"></div>
    <div class="item text">This is a test</div>
    <div class="item line"></div>
</div>

в CSS

.group { display: table; width: 100%; }
.item { display: table-cell; }
.text { white-space: nowrap; width: 1%; padding: 0 10px; }
.line { border-bottom: 1px solid #000; position: relative; top: -.5em; }

изменить размер текста, поместив свой font-size собственности на .group элемент.

ограничения:

• нет многострочного текста. Только одиночные линии.
• HTML разметка не так элегантно
• top собственности на .line элемент должен быть половину line-height. Итак, если у вас есть line-height of 1.5em, потом top должно быть -.75em. Это ограничение, потому что оно не автоматизировано, и если вы применяете эти стили к элементам с разными высотами линий, вам может потребоваться повторно применить ваш line-height стиль.

для меня эти ограничения перевешивают "проблемы", которые я отметил в начале моего ответа для большинства реализаций.

Если кому-то интересно, Как установить заголовок так, чтобы он отображался с фиксированным расстоянием до левой стороны (а не по центру, как показано выше), я понял это, изменив код @Puigcerber.

h1 {
  white-space: nowrap;
  overflow: hidden;
}

h1:before, 
h1:after {
  background-color: #000;
  content: "";
  display: inline-block;
  height: 1px;
  position: relative;
  vertical-align: middle;
}

h1:before {
  right: 0.3em;
  width: 50px;
}

h1:after {
  left: 0.3em;
  width: 100%;
}

h6 {
    font: 14px sans-serif;
    margin-top: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 900;
}

    h6.background {
        position: relative;
        z-index: 1;
        margin-top: 0%;
        width:85%;
        margin-left:6%;
    }

        h6.background span {
            background: #fff;
            padding: 0 15px;
        }

        h6.background:before {
            border-top: 2px solid #dfdfdf;
            content: "";
            margin: 0 auto; /* this centers the line to the full width specified */
            position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
            top: 50%;
            left: 0;
            right: 0;
            bottom: 0;
            width: 95%;
            z-index: -1;
        }

это поможет вам

это дает вам статическую ширину линии, но отлично работает. Ширина линии контролируется путем добавления или взятия '\00a0' (пробел unicode).

h1:before, h1:after {
  content:'a0a0a0a0';
  text-decoration: line-through;
  margin: auto 0.5em;
}

<h1>side lines</h1>

Я использую макет таблицы для динамического заполнения сторон и 0-высоты, абсолютного положения divs для динамического вертикального позиционирования:

• нет жестких размеров
• изображения
• нет псевдо-элементами
• уважает фоне
• внешний вид панели управления

https://jsfiddle.net/eq5gz5xL/18/

я обнаружил, что немного ниже true центр выглядит лучше всего с текстом; Это можно настроить, где 55% is (более высокая высота делает бар ниже). Внешний вид линии может быть изменен, где border-bottom - это.

HTML-код:

<div class="title">
  <div class="title-row">
    <div class="bar-container">
      <div class="bar"></div>
    </div>
    <div class="text">
      Title
    </div>
    <div class="bar-container">
      <div class="bar"></div>
    </div>
  </div>
</div>

CSS:

.title{
  display: table;
  width: 100%
  background: linear-gradient(to right, white, lightgray);
}
.title-row{
  display: table-row;
}
.bar-container {
  display: table-cell;
  position: relative;
  width: 50%;
}
.bar {
  position: absolute;
  width: 100%;
  top: 55%;
  border-bottom: 1px solid black;
}
.text {
  display: table-cell;
  padding-left: 5px;
  padding-right: 5px;
  font-size: 36px;
}

из стольких альтернатив я бы предпочел ответ как это мульти пересекают в настоящее время браузеры.

я использую его больше, чем один из моих Домашняя страница. Как советуют есть только один <h1> особенно на главной странице. Так что надо менять h1 to h2 или выше.

h2 {margin-top:50px;
  display:flex;
  background:linear-gradient(to left,gray,lightgray,white,yellow,turquoise);;
}
h2:before, h2:after {
  color:white;
  content:'';
  flex:1;
  border-bottom:groove 2px;
  margin:auto 0.25em;
  box-shadow: 0 -1px ;/* ou 0 1px si border-style:ridge */
}

<h2>side lines via flex</h2>

Я не слишком уверен, но вы можете попробовать использовать горизонтальное правило и нажать текст выше его верхнего поля. Вам понадобится фиксированная ширина на теге абзаца и фон тоже. Это немного хаки, и я не знаю, будет ли он работать во всех браузерах, и вам нужно установить отрицательную маржу на основе размера шрифта. Работает на Chrome, хотя.

<style>   
 p{ margin-top:-20px; background:#fff; width:20px;}
</style>

<hr><p>def</p>

Я пробовал большинство предложенных способов, но заканчивается некоторыми проблемами, такими как полная ширина или не подходит для динамического контента. Наконец, я изменил код и отлично работает. Этот пример кода будет рисовать эти строки до и после, и он является гибким в изменении содержимого. Центр тоже выровнен.

HTML-код

        <div style="text-align:center"> 
            <h1>
                <span >S</span>
            </h1> 
        </div> 

        <div style="text-align:center"> 
            <h1>
                <span >Long text</span>
            </h1> 
        </div> 

в CSS

      h1 {
            display: inline-block;
            position: relative;
            text-align: center;
        }

        h1 span {
            background: #fff;
            padding: 0 10px;
            position: relative;
            z-index: 1;
        }

        h1:before {
            background: #ddd;
            content: "";
            height: 1px;
            position: absolute;
            top: 50%;
            width: calc(100% + 50px);//Support in modern browsers
            left: -25px;
        }

        h1:before {
            left: ;
        }

результат: https://jsfiddle.net/fasilkk/vowqfnb9/

не бить мертвую лошадь, но я искал решение, оказался здесь, и был сам варианты не устраивают, не в последнюю очередь по какой-то причине я не смог получить решения здесь, чтобы работать хорошо для меня. (Вероятно, из-за ошибок с моей стороны...) Но я играл с flexbox, и вот что я сделал, чтобы работать на себя.

некоторые из настроек являются жесткими, но только для целей демонстрации. Я думаю, что это решение должно работать в любой современный браузер. Просто удалить/скорректировать настройки .flex-родительский класс, отрегулируйте цвета / текст / материал и (я надеюсь) вы будете так же счастливы, как и я с этим подходом.

HTML-код:

.flex-parent {
  display: flex;
  width: 300px;
  height: 20px;
  align-items: center;
}

.flex-child-edge {
  flex-grow: 2;
  height: 1px;
  background-color: #000;
  border: 1px #000 solid;
}
.flex-child-text {
  flex-basis: auto;
  flex-grow: 0;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

<div class="flex-parent">
  <div class="flex-child-edge"></div>
  <div class="flex-child-text">I found this simpler!</div>
  <div class="flex-child-edge"></div>
</div>

Я также сохранил свое решение здесь: https://jsfiddle.net/Wellspring/wupj1y1a/1/

легче, чем я видел, без :before и :after http://codepen.io/bekerov/pen/QwbaNR