Выравнивание элементов по левому, центру и правому краю во флексбоксе ⇐ Html

[Anonymous]

Я пытаюсь создать этот верхний заголовок с помощью flexbox.




По сути, я хотел бы центрировать (Учреждение учреждение 1) на линии с тремя другими элементами, которые вы видите. (Институционер, Ледер и Лог уд), как вы видите на изображении.

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

.nav {
background: #e1e1e1;
}
ol, ul {
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.header-title {
justify-content: center;
align-self: center;
display: flex;
}
.nav ul li.logout {
margin-left: auto;
}
.nav ul li a {
text-decoration: none;
padding: 0px 20px;
font-weight: 600;
}

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

Institution institution 1

[list]
[*][url=/institutions/]Institutioner[/url]
[*]
[url=/leaders/]Ledere[/url]

[*]
[url=/user/logout]Log ud[/url]

[/list]

Демо — JSFiddle

Подробнее здесь: https://stackoverflow.com/questions/432 ... in-flexbox