![center center](https://c1.lmlphp.com/image/static/default_avatar.gif)
本文介绍了在全屏 div 中与 Tailwind CSS 垂直对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何将 div 与 Tailwind 垂直对齐?我想要的:
-----------------------------------|||||||项目 1 ||项目2 |||||||---------------------
我目前拥有的:
-----------------------------------|项目 1 ||项目2 |||||||||||||---------------------
HTML
<h3 class="text-white">heading</h3><button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">呼吁采取行动
CSS
.bgimg {背景图片:url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');}
我已经使用 items-center
类成功地以辅助轴(左右)为中心.阅读文档,我尝试了 align-middle
但它不起作用.我已确认 div 具有全高和 my-auto
.
我正在使用此版本的 Tailwind:https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
这是一个 JSFiddle:https://jsfiddle.net/7xnghf1m/2/>
解决方案
你也可以
<div class="m-auto"><h3>标题</h3><按钮>按钮</按钮>
How can I vertically align a div with Tailwind?What I want:
-----------------------------------
| |
| |
| |
| item1 |
| item2 |
| |
| |
| |
-----------------------------------
What I currently have:
-----------------------------------
| item1 |
| item2 |
| |
| |
| |
| |
| |
| |
-----------------------------------
HTML
<div class="flex flex-col h-screen my-auto items-center bgimg bg-cover">
<h3 class="text-white">heading</h3>
<button class="mt-2 bg-white text-black font-bold py-1 px-8 rounded m-2">
call to action
</button>
</div>
CSS
.bgimg {
background-image: url('https://d1ia71hq4oe7pn.cloudfront.net/photo/60021841-480px.jpg');
}
I have successfully centered on the secondary axis (left-right) with class items-center
. Reading the documentation, I tried align-middle
but it does not work. I have confirmed the divs have full height and my-auto
.
I'm using this version of Tailwind: https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css
Here is a JSFiddle: https://jsfiddle.net/7xnghf1m/2/
解决方案
You can also do
<div class="flex h-screen">
<div class="m-auto">
<h3>title</h3>
<button>button</button>
</div>
</div>
这篇关于在全屏 div 中与 Tailwind CSS 垂直对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!