Placing a symbol between two hr

Question

I want to place a square symbol between two hr tags to create a separator and i want the square to be in the middle of the lines. With this code the square is placed lower than the hr tags, not in the middle of them.

This is the html:

    <div class="separator">
        <hr width='150' align="left">
            <span style="color: #fff;">&#9632;</span>
        <hr width='150' align="right">
    </div>

And here is the css:

   separator {
         margin: 5% 0;
   }

   hr {
       border: none;
       height: 2px;
       background: #fff;
       display: inline-block;
   }

score 1 · Accepted Answer · answered Nov 25 '17 at 19:55

1

Something like this should do the job by leveraging flexbox:

CSS

.divider {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.divider hr {
  flex: 1 1 0;
}

.divider .square {
  width: 15px;
  height: 15px;
  background-color: black;
}

HTML

<div class="divider">
    <hr />
    <div class="square"></div>
    <hr />
</div>

answered Nov 25 '17 at 19:55

treyhakanson

4,611
2
16
33

Ok it helps. But i forgot to mention that i don't want the 2 hr tag to have the full width of the div they are placed in. I want their width to be like 25% each – Catalin Sandu Nov 25 '17 at 20:00
That's arbitrary. Just place the whole thing in another div that isn't the full width or change the divider's width from 100% to your desired value – treyhakanson Nov 25 '17 at 20:03
It works perfectly. Thank you very much! – Catalin Sandu Nov 25 '17 at 20:05

score 1 · Answer 2 · answered Nov 25 '17 at 20:04

1

Use float in hr

Html code

<div class="separator">
            <hr width='150' align="left" style="float: left;">
                <span style="color: #fff;">&#9632;</span>
            <hr width='150' align="right">
        </div>

answered Nov 25 '17 at 20:04

Ayush Sahu

268
3
15

Placing a symbol between two hr

2 Answers2