CODEWITHSUNDEEP
htmlcssflexboxcentering
Dave Mikes
Dave Mikes

Reputation: 621

Aligning elements left, center and right in flexbox

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

Upvotes: 54

Views: 56920

Answers (5)

Jake Zeitz
Jake Zeitz

Reputation: 2564

Css grid will do this better than flexbox.

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}
button {
  display: inline-block;
}
.short-content {
  margin-left: auto;
}
<div class="grid">
  <div class="long-content">
    This has content that is fairly long
  </div>
  <button>CTA Button</button>
  <div class="short-content">
    Small Text
  </div>
</div>

Upvotes: 3

T. Bulford
T. Bulford

Reputation: 407

Here is a Flex solution that aligns the right and left containers while centering the middle container correctly.

.header-box {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    padding-top: 50px;
    
}
.left-header, .center-header, .right-header {
    flex: 100px; /* adjust width if needed */
}
.header-box div:nth-of-type(1) {
    text-align: left;
}
.header-box div:nth-of-type(2) {
    align-self: center;
    text-align: center;
}
.header-box div:nth-of-type(3) {
    text-align: right;
}
<div class="header-box">
  <div class="left-header">Left<br>header<br>content</div>
  <div class="center-header">Center<br>header<br>content</div>
  <div class="right-header">Right<br>header<br>content</div>
</div>

Upvotes: 1

Fellow Stranger
Fellow Stranger

Reputation: 34013

Use justify-content: space-between; like this:

.container {
  display: flex;
  justify-content: space-between;
}
<div class="container">
  <div>A</div>
  <div>B</div>
  <div>C</div>
</div>

Upvotes: 8

Michael Benjamin
Michael Benjamin

Reputation: 371231

Use nested flex containers and flex-grow: 1.

This allows you to create three equal-width sections on the nav bar.

Then each section becomes a (nested) flex container which allows you to vertically and horizontally align the links using flex properties.

Now the left and right items are pinned to the edges of the container and the middle item is perfectly centered (even though the left and right items are different widths).

.nav {
  display: flex;
  height: 50px;      /* optional; just for demo */
  background: white;
}

.links {
  flex: 1;          /* shorthand for: flex-grow: 1, flex-shrink: 1, flex-basis: 0 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border: 1px dashed red;
}

.header-title {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed red;
}

.logout {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  border: 1px dashed red;
}

.links a {
  margin: 0 5px;
  text-decoration: none;
}
<div class="nav mobilenav">

  <div class="links">
    <a href="/institutions/">Institutioner</a>
    <a href="/leaders/">Ledere</a>
  </div>

  <div class="header-title">Institution institution 1</div>

  <div class="logout"><a class="button-dark" href="/user/logout">Log ud</a></div>

</div>

jsFiddle

Upvotes: 75

Kevin Jantzer
Kevin Jantzer

Reputation: 9451

If you are open to changing your html, you need to put all the items in your header on the same level in the DOM.

Here's a working example

.nav {
  background: #e1e1e1;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
}

.nav > div {
  min-width: 0;
  white-space: nowrap;
}

.header-title {
  flex-basis: 80%;
  text-align: center;
}

.nav div a {
  text-decoration: none;
  padding: 0px 20px;
  font-weight: 600;
}
<div class="nav mobilenav">

  <div><a href="/institutions/">Institutioner</a></div>

  <div><a href="/leaders/">Ledere</a></div>

  <div class="header-title">
    Institution institution 1
  </div>

  <div class="logout">
    <a class="button-dark" href="/user/logout">Log ud</a>
  </div>

</div>

Upvotes: -2

Related Questions