Gostaria de saber como eu poderia fazer uma régua horizontal em HTML ou CSS com um texto no seu centro. Conheço apenas o comando <HR>
do HTML, mas parece que ele não me deixa por um texto no seu centro.
Alguém tem alguma sugestão?
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeGostaria de saber como eu poderia fazer uma régua horizontal em HTML ou CSS com um texto no seu centro. Conheço apenas o comando <HR>
do HTML, mas parece que ele não me deixa por um texto no seu centro.
Alguém tem alguma sugestão?
Pode ser feito assim:
.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>
Se você quiser utilizar o <hr>
pode utilizar o content
para colocar o texto:
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>
Aqui vai uma solução simulando uma <hr>
com texto centralizado:
.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>
Retirado daqui: https://stackoverflow.com/a/2812830/4178863