Как сделать такой разделитель на сайте (см. скрин)?

Mahol
На сайте с 20.11.2016
Offline
66
605

Доброго вечера всем.

Как сделать такой вроде несложный разделитель? CSS или плагин для Wordpress есть на примете?

p.s. честно сказать, не знаю, как найти подобное в поисковике.

jpg 182099.jpg
S
На сайте с 01.12.2017
Offline
118
#1

в Bootstrap посмотрите код вывода и CSS, это же стандартная фича для фреймворков

SS
На сайте с 15.12.2015
Offline
62
#2


<div style="height: 50px; background: whitesmoke;">
<div style="height: 2px; padding: 24px 0;">
<div style="height: 2px;background: #000;"></div>
</div>
<div style=" margin: -50px auto 0;height: 50px;line-height: 50px;width: 170px; background: inherit; text-align: center;">
Разделитель
</div>
</div>
Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
SI
На сайте с 03.12.2007
Offline
130
#3

Нужно только сверху? Можно целиком завернуть.


<fieldset style='border: 2px solid;'>
<legend align='center'>&nbsp; УСЛУГИ &nbsp;</legend>
Текст в рамке с заголовком.
</fieldset>
-= Онлайн сервисы =-
S
На сайте с 13.10.2014
Offline
156
#4

ээээх.. молодежжжж (с)

 вариант 1


<div class="separator"><span class="separator__text">text</span></div>
<style>
.separator{
display:block;
position:relative;
text-align:center;
}
.separator:before{
display:block;
position:absolute;
left:0;
top:50%;
width:100%;
height:1px;
background-color:#999999;
content:"";
z-index:1;
}
.separator__text{
display:inline-block;
background-color:#FFFFFF;
padding: 3px 10px 2px 10px;
line-height:100%;
position:relative;
z-index:2;
}
</style>


вариант 2

<div class="separator2"><s></s><span class="separator2__text">text</span><s></s></div>
<style>
.separator2{
display:flex;
justify-content:center;
align-items:center;
}
.separator2 > s{
height:1px;
background-color:#999999;
display:block;
width:50%;
}
.separator2__text{
padding: 1px 10px;
}
</style>
S
На сайте с 30.09.2016
Offline
469
#5

silicoid, проиграли в этой олимпиаде. У конкурентов код короче. ;)

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
S
На сайте с 13.10.2014
Offline
156
#6

Sitealert, Тут не код короче, а чтоб работало нормально в любом месте сайта и без колхоза из inline styles

и потом <div class="separator"><span>text</span></div> тоже код не длинный просто я его разметил согласно БЭМ парадигме. Привычкассс

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий