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> </divYou 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> </divAnother solution is to use the pseudo selector ::after
.horizontal::after{ content: ""; display: inline-block; border:1px solid black; margin-left:2px; margin-bottom: 3px; width: 100px; }<div class="col-sm-4"> <h4> <span class="horizontal">Publication</span> Method </h4> </div
Add vertical-align property text-top.
vertical-align:text-top; .horizontal{ display: inline-block; width: 100px; vertical-align:text-top; }<div class="col-sm-4"> <h4>Publication<hr class="horizontal"/>Method</h4> </div