I'm trying to center this burger. I used "grid place-items-center" so it gets centered and "h-screen" in order to let it be centered in the full height. The problem is that it's not in the center, obviously because of the logo at the top. how do i ignore this logo and center it anyways?
Greetings, PixelPage
You are almost there. The only thing you need to do is add a w-full
to the parent div of logo (the one with the absolute class).
<div class="fixed left-0 h-screen bg-gradient-to-t from-[#07C8F9] to-[#6D8AE4] w-24">
<div class="w-full absolute grid place-items-center mt-8">
<img src="/assets/branding/logo-white.png" class="w-12 h-12"></img>
</div>
<div class="grid place-items-center h-full">
<img src="/assets/common/Burger.png" class="w-16 h-16"></img>
</div>
</div>
Hope this helps.