how to make a divider line? [duplicate] - html

Question

This question already has answers here:
heading with horizontal line on either side [duplicate]
(3 answers)
Closed 4 years ago.
I'm trying to figure out how to make two divider lines, that are separated by text. see pic for example
I can make a single line,
but I don't know how to make two that or inline and have text in the middle.

Answer 1

If the background is just a solid color then you can create a container width a width 100%; height: 1px container and put the text on the middle, with a bigger z-index and the same background color as the page background.
Here is an example (using a pseudo-element to create the line)
body {
background: #fafafa;
font-size: 15px;
font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.section-header {
position: relative;
text-align: center;
}
.section-header:before {
content: '';
z-index: 1;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
height: 1px;
background: #dddddd;
}
.section-header__title {
position: relative;
z-index: 2;
background: #fafafa;
padding: 5px 20px;
font-weight: 700;
font-size: 20px;
text-transform: uppercase;
display: inline-block;
color: #174750;
}
<div class="section-header">
<span class="section-header__title">Day 1</span>
</div>

Answer 2

Try this. Create a div with two hr and a span. Then give it some styles. For example:
<style>
.pos_left{
color: #f00;
width: 40%;
}
.pos_right{
color: #f00;
width: 40%;
}
span{
width: 10%;
}
.line{
position: absolute;
top: 10%;
width: 40%;
display: flex;
flex-wrap: wrap;
}
</style>
<div class='line'>
<hr class='pos_left'><span>Day 1</span><hr
class='pos_right'>
</div>
You can style and position it accordingly.

Answer 3

Something like this should work fine.
Also if you want to increase the space between the text and the lines, just increase the second value of the "padding: 0px 10px;" eg. "padding: 0px 25px;"
<div style="margin-top: 20px; width: 100%; height: 10px; border-bottom: 1px solid #e3e3e3; text-align: center; margin-bottom: 30px;">
<span style="font-size: 15px; background-color: #ffffff; padding: 0px 10px;">
SOME TEXT HERE
</span>
</div>