0

I have a basic bootstrap header here: https://codepen.io/yan14171/details/KKQNoYW

<nav class="navbar navbar-light" id="navbar">
  <a class="navbar-brand"
    routerLink="home">
    <img src="https://jaumesegarra.github.io/minesweeper/favicon.ico" width="40vw" height="40vh">
  </a>
  <div class="navbar-nav" id="play-button">
    <a class="nav-item nav-link"
      routerLink="minesweeper">
      <h2>Play</h2>
    </a>
  </div>
  <span class="navbar-nav" id="login-button">
    <a class="nav-item nav-link"
      routerLink="login">
      <h5>Log In</h5>
    </a>
  </span>
</nav>

CSS:

#navbar {
  background-color: rgba(191, 191, 191, 255);
  height: 3vh;
  border-radius: 0px 0px 20px 20px;
  padding-bottom: 45px;
}

#play-button{
  justify-self: center;
}

#login-button{
  justify-self: flex-end;
  display: none;
}

So the middle nav button has a set justify-self via id, but it has no effect with the right button without the right button How do I make it so, that the middle button always stays in the center?

PavelPerov
  • 65
  • 5

2 Answers2

1

if there are three elements then in parent just use

#navbar {
justify-content: center;
}

but I am seeing you have display:none for the last item so to solve that use this property on the middle one.

#play-button {
margin: 0 auto;
}

it will center it but in the rest of the space not in the navbar

Mubasher Ali
  • 502
  • 6
  • 14
0

You can simply achieve this by using text-align property... below is the code

#play-button{
   text-align: center;
}

#login-button{
   text-align: end;
}