在全屏 div 中与 Tailwind CSS 垂直对齐 [英] Vertical align with Tailwind CSS across full screen div

问题描述

如何将 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 垂直对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！