align-item:center is centering only the first element-CodePudding

I applied the align-item:center property on nav elements but it is centering only the first div while the second element which is a list is not centered. Please give me a solution and reason why it is happening

body {
  background-color: cadetblue ! important;
  `enter code here`
}

#firstNav {
  display: flex;
  background-color: aliceblue;
  align-items: center;
}

#logo {
  font-weight: bold;
}

ul {
  list-style: none;
}

ul li {
  display: inline;
  justify-content: space-between;
  padding: 5px;
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li a:hover,
ul li a:active {
  color: aqua;
  text-decoration: none;
}

<nav id="firstNav">
  <div id="logo">Jobee.pk</div>

  <ul>
    <li><a href="#">Jobs</a></li>
    <li><a href="#">Hrings</a></li>
    <li><a href="#">Sotions</a></li>
    <li><a href="#">Jobee Cares</a></li>
  </ul>

</nav>

CodePudding user response：

you can use justify-content: center to center all child elements of your #firstNav.

Optionally, you can also use align-items: center to vertically center the child elements of the navigation.

EDIT:

if you want the list (<ul>) to be vertically centred, as i read in some comments here, you should change the flex-direction of the ul element.

ul {
  display: flex;
  flex-direction: column;
  list-style: none;
}

body {
  background-color: cadetblue ! important;
  `enter code here`
}

#firstNav {
  display: flex;
  background-color: aliceblue;
  justify-content: center;  /* add these here */
  align-items: center;   /* optional */
}

#logo {
  font-weight: bold;
}

ul {
  /* display: flex; for vertical list */
  /* flex-direction: column; for vertical list */
  list-style: none;
}

ul li {
  display: inline;
  justify-content: space-between;
  padding: 5px;
}

ul li a {
  text-decoration: none;
  color: black;
}

ul li a:hover,
ul li a:active {
  color: aqua;
  text-decoration: none;
}

<nav id="firstNav">
  <div id="logo">Jobee.pk</div>

  <ul>
    <li><a href="#">Jobs</a></li>
    <li><a href="#">Hrings</a></li>
    <li><a href="#">Sotions</a></li>
    <li><a href="#">Jobee Cares</a></li>
  </ul>

</nav>

CodePudding user response：

Try this:

.center {
  text-align: center;
  list-style-position: inside;
}

<ul >
  <li><a href="#">Jobs</a></li>
  <li><a href="#">Hrings</a></li>
  <li><a href="#">Sotions</a></li>
  <li><a href="#">Jobee Cares</a></li>
</ul>

CodePudding user response：

<nav id="firstNav">
    <div id="logo">Jobee.pk</div>
   
    <ul >
        <li><a href="#">Jobs</a></li>
        <li><a href="#">Hrings</a></li>
        <li><a href="#">Sotions</a></li>
        <li><a href="#">Jobee Cares</a></li>
    </ul> 
</nav>

CSS

.inner-list {
  display: "flex";
  align-items: "center";
 }

That's the way flexbox works, it acts only on direct children of the parent element. To have the elements of the inner ul centered as well, you have to apply flex center styles to it as well.