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

Question

Я пытаюсь создать горизонтальное правило с текстом в середине. Например:

----------------------------------- мой заголовок здесь --------- --------------------

Есть ли способ сделать это в CSS? Без всех черточек "-", очевидно.

Answer 1

Это примерно так, как я бы это сделал: строка создается установкой border-bottom на содержащем h2, а затем h2 меньшим line-height. Затем текст помещается во вложенный span с непрозрачным фоном.

h2 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

<h2><span>THIS IS A TEST</span></h2>
<p>this is some content other</p>

Я тестировал только в Chrome, но нет причин, чтобы он не работал в других браузерах.

JSFiddle: http://jsfiddle.net/7jGHS/

Answer 2

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

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/

Answer 3

Хорошо, этот более сложный, но он работает во всем, кроме IE <8 </p>

<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; 
}

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

Хотя, похоже, он работает хорошо: http://jsfiddle.net/tUGrf/3/

Answer 4

Еще один метод:

span:after,
span:before{
    content:"\00a0\00a0\00a0\00a0\00a0";
    text-decoration:line-through;
}

<span> your text </span>

Answer 5

Вот решение на основе 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/

Answer 6

для более поздних (в настоящее время) браузеров, display:flex и 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>

Answer 7

.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>

Answer 8

<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/

Answer 9

Я искал несколько решений для этого простого украшения, и я нашел довольно много, некоторые странные, некоторые даже с JS, чтобы вычислить высоту шрифта и бла, бла, бла, тогда я ' Я прочитал этот пост и прочитал комментарий от тридцатки , в котором говорилось о 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:

Следуя идее Бекерова Артура, что тоже неплохо, я изменил изображение .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;
}

Answer 10

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

Вопросы, на которые стоит обратить внимание:

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

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

Решение:

( Представление JSFiddle )

Вместо "маскирования" границы с помощьюa 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 из 1.5em, то top должно быть -.75em.Это ограничение, потому что оно не автоматизировано, и если вы применяете эти стили к элементам с разной высотой строки, вам может потребоваться повторно применить ваш стиль line-height.

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