How can I vertically align my HR within a DIV? [duplicate]

1 day ago 3

ARTICLE AD BOX

I have this:

<div id="axis_display"> <div>◄<hr /></div> <div>stuff here ...</div> <div>►<hr /></div> </div> hr { color: #FFFFFF; margin: 0 auto; width: 100%; } #axis_display { display: flex; flex-direction: row; justify-content: space-between; align-items: center; border-left: solid 0.1rem #FFFFFF; border-right: solid 0.1rem #FFFFFF; text-align: center; } #axis_display > div:first-child { width: 33%; margin-right: 0.25rem; font-size: 1.25rem; text-align: left; } #axis_display > div:last-child { width: 33%; margin-left: 0.25rem; font-size: 1.25rem; text-align: right; }

But the <hr /> will not vertically align in the middle, no matter what I try. I want it to look like a line going through the middle of the div with an arrow head at the end.

How can I accomplish the vertical alignment?

EDIT: I added a fiddle.

I added a JSFIddle: https://jsfiddle.net/4ajq91mh/