Adding a horizontal line in between texts in HTML

Question

I want to add a horizontal line in HTML between texts like shown in this screenshot. From this code, I get a line but not centered between the texts. How can I achieve this?

What I need is something like: Publication---------------------Method.

My code:

.horizontal{
    display: inline-block;
    width: 100px;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div

Answer 1

You can set flex rules for the h4 tag. Aligns the center rule align-items: center. This example good aligns your line to the center of the words.

.col-sm-4 h4 {
    display: inline-flex;
    align-items: center;
}

.horizontal{
    /*display: inline-block;*/
    width: 100px;
    margin: 0;
}

<div class="col-sm-4">
    <h4>Publication <hr class="horizontal"/>Method</h4>
</div