3 div's in a container [duplicate] - html

Question

This question already has answers here:
heading with horizontal line on either side [duplicate]
(3 answers)
Closed 5 years ago.
First I have to say, I didn't find any answer to this. If it's a duplicate, please forgive me and point me correct.
I'm trying to create a div with three divs inside. The center div should have text, and the side divs should have a vertically centered line, like this:
This is the code I have so far:
HTML:
<div className="container">
<div class="line"><hr/></div>
<div class="text">My Text</div>
<div class="line"><hr/></div>
</div>
CSS:
.container {
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
display: inline-block;
}
.line {
display: inline-block;
}
}
My problem is that I don't see the lines at all, my text is positioned to the left. I tried margin: auto; but that didn't help me. Can someone plese help?
I have one prerequisite, I can't use flexboxes.

Answer 1

You could approach this layout using pseudoelements instead of hr.
Example:
.container {
text-align: center;
position: relative;
}
.container:before {
content: '';
position: absolute;
left: 0;
right: 0;
height: 2px;
background: grey;
top: 50%;
transform: translateY(-50%);
}
.text {
font-size: 16px;
text-transform: uppercase;
color: red;
margin: 0 auto;
display: inline-block;
background: white;
position: relative;
/* add left and right padding if needed */
padding: 0 1em;
}
<div class="container">
<div class="text">My Text</div>
</div>