Kevin Powell - Community•10mo ago

How do I center navigation links?

How do i center my navigation links? I used flexbox and added justify-content: space-between, but it still seems a bit off centered

<nav class="nav">
      <div class="nav-logo">
        <img src="https://www.w3schools.com/howto/img_avatar.png" />
        <h1>Long title here</h1>
      </div>
      <div class="nav-links">
        <ul class="nav-list">
          <li>Facebook</li>
          <li>Youtube</li>
          <li>Twitter</li>
        </ul>
      </div>
      <div class="nav-acc">
        <button>Login</button>
      </div>
    </nav>

<nav class="nav">
      <div class="nav-logo">
        <img src="https://www.w3schools.com/howto/img_avatar.png" />
        <h1>Long title here</h1>
      </div>
      <div class="nav-links">
        <ul class="nav-list">
          <li>Facebook</li>
          <li>Youtube</li>
          <li>Twitter</li>
        </ul>
      </div>
      <div class="nav-acc">
        <button>Login</button>
      </div>
    </nav>

.nav {
  background: wheat;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
}

.nav-logo {
  display: flex;
  gap: 1em;
  align-items: center;
}

.nav-logo img {
  width: 50px;
}

.nav-logo h1 {
  font-size: 2rem;
}

.nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li {
  font-size: 1.5rem;
  margin: 0em 2em;
}

.nav-acc {
  display: flex;
}

.nav-acc > button {
  margin: 0 0.5em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 1px solid white;
}

.nav {
  background: wheat;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 2em;
}

.nav-logo {
  display: flex;
  gap: 1em;
  align-items: center;
}

.nav-logo img {
  width: 50px;
}

.nav-logo h1 {
  font-size: 2rem;
}

.nav-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li {
  font-size: 1.5rem;
  margin: 0em 2em;
}

.nav-acc {
  display: flex;
}

.nav-acc > button {
  margin: 0 0.5em;
  padding: 0.5em 1em;
  border-radius: 10px;
  border: 1px solid white;
}

3 Replies

Mannix•10mo ago

you could try using grid instead

display: grid;
grid-template-columns: repeat(3,1fr);

display: grid;
grid-template-columns: repeat(3,1fr);

Wolle•10mo ago

Just a little thing to add to Mannix answer: the left and right column(s) just have to be the same and the middle one doesnt matter. For example: 1fr auto 1fr, or 50px 1fr auto 50px 1fr

endeav6r•10mo ago

Oh, so grid is the way to go. I've only looked into flexbox, so I'll go check grid out. Thanks!

Gaming

Programming

How do I center navigation links?