Horizontal ruler with text

Navigation
3

I would like to know how I could make a horizontal ruler in HTML or CSS with a text in its center. I know only the <HR> of HTML command, but it does not seem to leave me with a text in its center.

Does anyone have any suggestions?

    
asked by anonymous 15.02.2016 / 18:55

2 answers

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 <hr> you can use content to put 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>
    
15.02.2016 / 19:08
4

Here's a solution simulating a <hr> with centralized text: 

.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>

Retrieved from here: link

    
15.02.2016 / 19:01
Limit text display by number of characters with CSS Verify that the attributes of an object are null in a less manual way