Not able to understand why the given CSS is not working

June 11, 2024

This is basically a youtube clone which i am working on. The contents of the sidebar should be in the middle. But i am not able to bring the contents to the middle.

.sidebar {
  background-color: rgb(175, 146, 146);
  width: 100px;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  bottom: 0;
  left: 0;
  top: 72px;
  padding-top: 15px;
}

p {
  margin: 0;
  margin-bottom: 24px;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
}

.home-img {
  width: 24px;
}

.home {
  width: 100%;
}

.explore-img {
  width: 24px;
}

.explore {
  width: 100%;
}

.subscriptions-img {
  width: 24px;
}

.subscriptions {
  width: 100%;
}

.originals-img {
  width: 24px;
}

.originals {
  width: 100%;
}

.youtube-music-img {
  width: 24px;
}

.youtube-music {
  width: 100%;
}

.library-img {
  width: 24px;
}

.library {
  width: 100%;
}

<div class="sidebar">
  <div class="home">
    <img class="home-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="hp">Home</p>
  </div>
  <div class="explore">
    <img class="explore-img" src=".https://dummyimage.com/20x20/000/fff" alt="">
    <p class="ep">Explore</p>
  </div>
  <div class="subscriptions">
    <img class="subscriptions-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="sp">Subsriptions</p>
  </div>
  <div class="originals">
    <img class="originals-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="op">Originals</p>
  </div>
  <div class="youtube-music">
    <img class="youtube-music-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="yp">Youtube Music</p>
  </div>
  <div class="library">
    <img class="library-img" src="https://dummyimage.com/20x20/000/fff" alt="">
    <p class="lp">Library</p>
  </div>

</div>

I am expecting the sidebar to look like below :

>Solution :

You must use display: flex with flex-direction: column and align-items: center in your div children of .sidebar like this:

.sidebar{
    background-color:rgb(175, 146, 146);
    width: 100px;
    display: flex;
    flex-direction: column;
    position: fixed;
    align-items: center;
    bottom: 0;
    left: 0;
    top:72px;
    padding-top: 15px;
}
p{
    margin: 0;
    margin-bottom: 24px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 12px;
}
.home-img{
    width: 24px;
}
.home{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.explore-img{
    width: 24px;
}
.explore{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.subscriptions-img{
    width: 24px;
}
.subscriptions{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.originals-img{
    width: 24px;
}
.originals{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.youtube-music-img{
    width: 24px;
}
.youtube-music{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;
}
.library-img{
    width: 24px;
}
.library{
    width: 100%;
    display:flex;
    flex-direction: column;
    align-items: center;

}