Advertisements
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;
}