Name: Centering content between two different lengths contents in a Navbar
Rating: 1.2 (9143 reviews)
Author: artydev

Centering content between two different lengths contents in a Navbar

artydev - Jul 11 '23 -

- Dev Community

This is a problem with often encounter when creating a navbar.
We want the middle content always centered whatever the lengths of the side parts.

Here is a very simple tip, let me know If you use it :-)

You can test it here : Centering

body {
  margin:0;
  padding:0;
  background: rgba(33,33,44);
  color: white
}

.container > nav{
  display:flex;
  background:  rgba(255, 2 , 0);
}

.container nav {
  padding: 1rem;
}

.container nav > div:first-child {
  flex: 1 1 0%;
}

.container nav > div:nth-child(2) {
  display:flex;
  align-items:center;
  gap: 1rem;  
}


.container nav > div:last-child {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-end;
  gap: 1rem;

}

Here is a simpler way DEMO:

.container > nav{
  display:flex;


}

.container nav {
  padding: 1rem;
}

.container nav > div:first-child {
  flex: 1 1 0%;
  background:red;

}
.container nav > div:last-child {
  display: flex;
  flex: 1 1 0%;
  justify-content: flex-end;
  gap: 1rem;
  background:red;
}