如何解决如何使用TailwindCSS
我正在将Vue与Tailwind一起使用,并希望创建一个“ NotFound”视图页面。该路由器视图上的内容应位于屏幕中央。路由器视图上方是导航栏组件,因此居中时必须注意高度。
首先,我尝试将h-screen
用于路由器视图
<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div>
<div class="bg-yellow-400 py-8">
my navbar
</div>
<div class="bg-green-400 flex justify-center items-center h-screen">
this content is not centered on screen
</div>
</div>
,但是您可以看到绿色容器中的内容不在屏幕中央。接下来,我尝试使用h-full
<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet" />
<div class="h-screen">
<div class="bg-yellow-400 py-8">
my navbar
</div>
<div class="bg-green-400 flex justify-center items-center h-full">
this content is not centered on screen
</div>
</div>
,但是不幸的是,这仍然无法解决。有人知道如何正确填充屏幕的其余高度,以便路由器视图的高度为100% - navbarComponentHeight
吗?
解决方法
使用如下所示的flexbox:
<link href="https://unpkg.com/tailwindcss@1.8.12/dist/tailwind.min.css" rel="stylesheet"/>
<div class="flex flex-col h-screen">
<div class="bg-yellow-400 py-8">
my navbar
</div>
<div class="bg-green-400 flex justify-center items-center flex-grow">
this content is not centered on screen
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。