I'm doing tests but I can not do it, I need a hr to appear and a centered text inside it, something like the picture below.
First: HR is (usually) a horizontal line that (normally) occupies the entire width of the block. Therefore you can not put something "inside" of it.
Second: the above is actually imprecise. HR is, semantically , a separation between paragraphs. Visually, it is usually represented as a horizontal line, but that is not essential or necessary. (In fact, that's a property of your default style , and, for course, it can be changed via css)
If what you want is to have what you show in the photo, then perhaps it is convenient for you to put everything together as an image.
If not, you can play with spans or divs, but you must adjust the sizes (and take care what happens when the width of the screen is reduced). For example:
.linea {
margin:0px 20px;
width:90px;
border-top:1px solid #999;
position: relative;
top:10px;
float:left;
}
.leyenda {
font-weight:bold;
float:left;
}<div style="width:400px;margin:auto;">
<div class="linea"> </div>
<div class="leyenda">Portafolio</div>
<div class="linea"> </div>
</div>