web-dev-qa-db-ja.com

全画面div全体でtailwindcssと垂直方向に整列

Divを追い風に垂直に配置するにはどうすればよいですか？私が欲しいもの：

-----------------------------------
|                                |
|                                |
|                                |
|             item1              |
|             item2              |
|                                |
|                                |
|                                |
-----------------------------------

私が現在持っているもの：

-----------------------------------
|             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');
}

クラスitems-centerを使用して、第2軸（左右）を中心に配置することに成功しました。ドキュメントを読んでalign-middleを試しましたが、機能しません。 divが完全な高さとmy-autoであることを確認しました。

私はこのバージョンのテールウィンドを使用しています： https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css

ここにJSFIDDLEがあります： https://jsfiddle.net/7xnghf1m/2/

tailwind-css
9
Anders

クラスjustify-centerを使用して主軸に合わせます。 align-middleはクロス軸で動作します。

1
Anders

あなたもすることができます

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
10
Nartub

位置揃えセンターとアイテムセンター

アンダースの答えはこの特定のケースの問題を解決しますが、justify-centerとitems-centerの使用は状況に応じたものであることに注意することが重要です。

tailwind documentation の例の1つを見てみましょう。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex justify-center bg-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

上記のコードを見るとわかるように、要素を水平方向に中央揃えしています。これの理由は、justify-centerクラスが要素をフレックスコンテナーの主軸の中心に配置するためです。

つまり、主軸を「列」に変更すると、異なる結果が得られます。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="flex flex-col justify-center bg-grey-lighter">
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">1</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">2</div>
  <div class="text-grey-darker text-center bg-grey-light px-4 py-2 m-2">3</div>
</div>

Justify-CenterとItems-Centerは、要素を主軸と交差軸の中心に配置し、互いの代わりに使用できます。これらは互いに反対であり、現在の主軸が何であるかによって異なる結果を生成します。

4
Linus Juhlin

垂直方向の配置は少しトリッキーです。これはうまくいくはずです。

これは、質問のASCII画像に類似したビューを生成するためのサンプルコードです。

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet"/>

<div class="relative h-32 bg-blue-400">
  <div class="absolute inset-0 flex items-center justify-center">
    Item 1
    <br>
    Item 2
  </div> 
</div>
1
mythicalcoder