Centering the flex-element

Question

I have such layout

.navbar {
  width: 100%;
  height: 64px;
  background: #0d1717;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .navbar-nav {
  width: 360px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .title {
  color: #fff;
  font-size: 32px;
  font-family: Fairview;
  color: #fcfcfc;
}

<header class="navbar">
  <div class="navbar-nav">
    <!-- content -->      
  </div>
  <span class="title">Summary</span>
</header>

How do I place the .title in the center of the block .navbar with flexbox? But at the same time, so that the .navbar-nav is left.

Check the dupe link ... and here how to use it on your code https://jsfiddle.net/xbn1tyu8/ — Asons, Dec 15 '17 at 10:16

score 2 · Accepted Answer · 2017-12-28T23:26:46.503

You can make use of justify-content:center . justify-content is used to align items horizontally while align-items is used for aligning them vertically.

.navbar {
  width: 100%;
  height: 64px;
  background: #0d1717;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar .title {
  color: #fff;
  font-size: 32px;
  font-family: Fairview;
  color: #fcfcfc;
}

<header class="navbar">
  <div class="navbar-nav">
  </div>
  <span class="title">Summary</span>
</header>

Using margin:auto on the child element to align horizontally:

.navbar {
  width: 100%;
  height: 64px;
  background: #0d1717;
  display: flex;
  align-items: center;
}

.navbar .title {
  color: #fff;
  font-size: 32px;
  font-family: Fairview;
  color: #fcfcfc;
  margin:0 auto;
}

<header class="navbar">
  <div class="navbar-nav">
  </div>
  <span class="title">Summary</span>
</header>

When another content is present as well in the navbar. You can make use of absolute and relative position and transform the position of title:

.navbar {
  width: 100%;
  height: 64px;
  background: #0d1717;
  display: flex;
  align-items: center;
  position:relative;
  color:white;
}

.navbar .navbar-nav {
  width: 360px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .title {
  position:absolute;
  color: #fff;
  font-size: 32px;
  font-family: Fairview;
  color: #fcfcfc;
  left:50%;
  transform:translateX(-50%);
}

<header class="navbar">
  <div class="navbar-nav">
  </div>
  <span class="title">Summary</span>
</header>

But in this case the .navbar-nav is also centered, and it must remain on the left. — Zhiskar, Dec 15 '17 at 10:00
@DudinVadim justify-content doesn't affect the navbar but the child tags inside it. Or you can make use of margin:0 auto on the child element to center. I updated it. — , Dec 15 '17 at 10:01
Sorry, forgot to put the code of the .navbar-nav .navbar .navbar-nav { width: 360px; height: 100%; display: flex; align-items: center; justify-content: space-between; } — Zhiskar, Dec 15 '17 at 10:07
@DudinVadim I added the 3rd solution which doesn't take anything else in consideration and just centers the title. — , Dec 15 '17 at 10:14

Centering the flex-element

1 Answers1