Add centered text to the middle of a <hr/>-like line
How about:
<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>
Check out this JSFiddle.
You can use vw
or %
to make it responsive.
The way to solve this without knowing the width and the background color is the following:
Structure
<div class="strike">
<span>Kringle</span>
</div>
.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;
}
Example: http://jsfiddle.net/z8Hnz/
Double line
To create a double line, use one of the following options:
1) Fixed space between lines
.strike > span:before,
.strike > span:after {
content: "";
position: absolute;
top: 50%;
width: 9999px;
border-top: 4px double red;
Example: http://jsfiddle.net/z8Hnz/103/
2) Custom space between lines
.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;
}
Example: http://jsfiddle.net/z8Hnz/105/
SASS (SCSS) version
Based on this solution, I added SCSS "with color property" if it could help someone...
//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;
}
}
}
example of use :
//content.scss
h2 {
@include bg-strike($col1);
color: $col1;
}
Flexbox is the solution:
.separator {
display: flex;
align-items: center;
text-align: center;
}
.separator::before,
.separator::after {
content: '';
flex: 1;
border-bottom: 1px solid #000;
}
.separator:not(:empty)::before {
margin-right: .25em;
}
.separator:not(:empty)::after {
margin-left: .25em;
}
<div class="separator">Next section</div>
Nowadays every browser supports it, and you can ensure compatibility with decade-old browsers by adding respective vendor prefixes if needed. It would degrade gracefully anyways.