Horizontal ruler with text

Question

I wonder how I could make a horizontal ruler in HTML or CSS with a text in its center. I only know the command <HR> HTML, but it looks like it won’t let me put a text in its center.

Does anyone have any suggestions?

Answer 1

Here’s a solution simulating a <hr> centered:

.linhaComTexto {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid black;
  text-align: center;
}

.linhaComTexto > span {
  font-size: 40px;
  background-color: #F3F5F6;
  padding: 0 10px;
}

<div class="linhaComTexto">
  <span>Texto</span>
</div>

Removed from here: https://stackoverflow.com/a/2812830/4178863

Answer 2

It can be done like this:

.separator {
  display: flex;
  align-items: center;
  text-align: center;
}
.separator::before,
.separator::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #000;
}
.separator::before {
  margin-right: .25em;
}
.separator::after {
  margin-left: .25em;
}

<div class="separator">Hello World</div>

If you want to use the <hr> can use the content to place the text:

 hr {
   padding: 0;
   border: none;
   border-top: medium double #333;
   color: #333;
   text-align: center;
 }
 hr:after {
   content: "Hello World 2";
   display: inline-block;
   position: relative;
   top: -0.7em;
   font-size: 1.5em;
   padding: 0 0.25em;
   background: white;
 }
 height:30px;
}

<hr>