CODEWITHSUNDEEP
htmlcssflexbox
rio
rio

Reputation: 807

How to vertically center an unordered list with display: flex

Hey people I'm trying to vertically center an ul inside a flex div. right now its center only for the horizontal.

enter image description here

how can I center it vertically? 

#skills {
  background-color: #262626;
  height: 100px;
  /* padding: 50px 0 50px 0; */
}
#skills ul {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}
#skills ul li {
  font-size: 60px;
  flex-grow: 1;
  text-align: center;
}
.fab,
.fas {
  color: white;
}
<section id="skills">
    <ul>
        <li><i class="fab fa-java"></i></li>
        <li><i class="fab fa-html5"></i>
        <li><i class="fab fa-css3-alt"></i></li>
        <li><i class="fab fa-js-square"></i></li>
        <li><i class="fab fa-node"></i></li>
        <li><i class="fab fa-angular"></i></li>
        <li><i class="fab fa-aws"></i></li>
        <li><i class="fab fa-git"></i></li>
        <li><i class="fas fa-database"></i></li>
    </ul>  
</section>

Upvotes: 1

Views: 388

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371231

You have successfully centered the list items inside the ul.

#skills ul {
    display: flex;
    align-items: center;
}

You just haven't centered the ul inside the section. So add this to your code:

section {
  display: flex;
  align-items: center;
}


#skills {
  background-color: #262626;
  height: 100px;
  /* padding: 50px 0 50px 0; */
  /* new */
  display: flex;
  align-items: center;
}

#skills ul {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 0 auto;
}

#skills ul li {
  font-size: 60px;
  flex-grow: 1;
  text-align: center;
}

.fab,
.fas {
  color: white;
}
<section id="skills">
  <ul>
    <li><i class="fab fa-java"></i></li>
    <li><i class="fab fa-html5"></i></li>
    <li><i class="fab fa-css3-alt"></i></li>
    <li><i class="fab fa-js-square"></i></li>
    <li><i class="fab fa-node"></i></li>
    <li><i class="fab fa-angular"></i></li>
    <li><i class="fab fa-aws"></i></li>
    <li><i class="fab fa-git"></i></li>
    <li><i class="fas fa-database"></i></li>
  </ul>
</section>

Upvotes: 4

Related Questions