Как я могу вертикально выровнять свой HR внутри DIV? [дубликат] ⇐ Html

[Anonymous]

У меня есть это:

Код: Выделить всё

◄
stuff here ...
►

Код: Выделить всё

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;
}

Но не выровняется по вертикали посередине, что бы я ни пытался. Я хочу, чтобы это выглядело как линия, проходящая через середину элемента div со стрелкой на конце.
Как выполнить вертикальное выравнивание?

РЕДАКТИРОВАТЬ: Я добавил скрипт.
Я добавил JSFIddle: https://jsfiddle.net/4ajq91mh/

Подробнее здесь: https://stackoverflow.com/questions/798 ... thin-a-div