justify-self propety doesn't work in bootstrap's navbar-CodePudding

I have a basic bootstrap header here: How do I make it so, that the middle button always stays in the center?

CodePudding user response：

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

CodePudding user response：

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

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

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

CodePudding user response：

A simple fix

justify-self is actually working as expected. The problem is with the css applied to the logon button. It is set to display:none and therefore has zero width. Other nav items flow to the right to fill the space. To hide the button, but keep the alignment, the easy fix would be to change it to visibility: hidden, which hides the button but not the space that it contains.

#login-button{
  justify-self: flex-end;
   /* display: none;  REMOVE */
  visibility: hidden;
}

Additionally, there's no need for most of this custom css as it can be done with existing Bootstrap classes. There are classes for flex, border radius, spacing, visibility, and more under the helpers and utilities sections of the documentation.

#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; */
  visibility: hidden;
}

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


<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet">