垂直居中，忽略其他元素

Question

我想把这个汉堡居中。我用"网格place-items-center"这样它就居中了，还有" h-screen "为了让它在整个高度中居中。问题是它不在中心，显然是因为顶部的标志。我如何忽略这个标志并将其居中?

我正在编码的导航栏

问候,PixelPage

Answer 1

你就快成功了。你唯一需要做的就是添加一个w-full到父div的logo(一个绝对类)。

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

希望对你有帮助。

Answer 2

通读本指南，它是无价的，我一直引用它。它应该可以帮助你弄清楚如何使用网格来放置你的项目:https://css-tricks.com/snippets/css/complete-guide-grid/