Search code examples
htmlcsstailwind-csscentering

Center vertically while ignoring other elements


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?

The navbar i'm coding

Greetings, PixelPage


Solution

  • 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.