3

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
Adrian Mole
  • 49,934
  • 160
  • 51
  • 83
Hotdot Cyber
  • 361
  • 1
  • 5
  • 21
  • Similar to this https://stackoverflow.com/questions/5214127/css-technique-for-a-horizontal-line-with-words-in-the-middle – Bishwas Sep 05 '20 at 10:48

3 Answers3

2

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
s.kuznetsov
  • 14,870
  • 3
  • 10
  • 25
2

Another 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
corn on the cob
  • 2,093
  • 3
  • 18
  • 29
Friday Ameh
  • 1,664
  • 1
  • 10
  • 15
1

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
Rayees AC
  • 4,426
  • 3
  • 8
  • 31