Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1617

Aligning elements left, center and right in flexbox

$
0
0

I'm trying to create this top header using flexbox.

header

Basically I would like to center the <div class="header-title"> (Institution institution 1) on the line with the 3 other elements you see. (Institutioner, Ledere and Log ud) like you see on the image.

.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;}
<div class="nav mobilenav"><div class="header-title">    Institution institution 1</div><ul><li><a href="/institutions/">Institutioner</a></li><li><a href="/leaders/">Ledere</a></li><li class="logout"><a class="button-dark" href="/user/logout">Log ud</a></li></ul></div>

Demo - JSFiddle


Viewing all articles
Browse latest Browse all 1617

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>