'justify-self propety doesn't work in bootstrap's navbar [duplicate]

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?

htmlcssflexbox


Solution 1:[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

Solution 2:[2]

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

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mubasher Ali
Solution 2 Sameer

Related Questions