Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical align with Tailwind CSS across full screen div

Tags:

tailwind-css

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/

like image 211
ajthinking Avatar asked Mar 08 '19 03:03

ajthinking


People also ask

How do you vertically center a div in Tailwind CSS?

You need a container with those CSS instructions: display: flex; align-items: center; justify-content: center; In Tailwind, this translates to the classes flex items-center justify-center .

How do I vertically align text in Tailwind CSS?

Text Top. Use align-text-top to align the top of an element with the top of the parent element's font.

Does vertical align work with Div?

The CSS vertical align property works smoothly with tables, but not with divs or any other elements. When you use it in a div, it aligns the element alongside the other divs and not the content — which is what we usually want). This only works with display: inline-block; .

How do you center horizontally and vertically in Tailwind CSS?

flex : To use a flex-div as container. h-screen : To size the container-height to the viewport height. justify-center : To justify center (horizontal center) - main axis - Doc. items-center : To align the items to center (horizontal center) - cross axis - Doc.


3 Answers

You can also do

<div class="flex h-screen">
  <div class="m-auto">
    <h3>title</h3>
    <button>button</button>
  </div>
</div>
like image 161
Nartub Avatar answered Oct 20 '22 19:10

Nartub


Partly referencing @mythicalcoder 's solution but using only the necessary classes provided by TailwindCss (Version 1.8.+):

  • flex : To use a flex-div as container
  • h-screen : To size the container-height to the viewport height.
  • justify-center : To justify center (horizontal center) - main axis - Doc
  • items-center : To align the items to center (horizontal center) - cross axis - Doc

My Solution to center two text lines:

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

  <div class="flex h-screen justify-center items-center">
    <div class="text-center bg-blue-400"> <!-- ⬅️ THIS DIV WILL BE CENTERED -->
        <h1 class="text-3xl">HEADING</h1>
        <p class="text-xl">Sub text</p>
    </div>
  </div>
like image 24
bastiotutuama Avatar answered Oct 20 '22 19:10

bastiotutuama


Justify-Center and Items-Center

While Anders' answer solves the problem for this particular case, I think it's important to note that using justify-center and items-center is circumstantial.

Let's have a look at one of the examples from the tailwind documentation.

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

<div class="flex justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

As we can see the above code centers the elements horizontally. The reason for this is because the justify-center class centers the element on the flex container's main axis.

This means that if we were to change the main axis to 'column' then we would get a different result.

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

<div class="flex flex-col justify-center bg-gray-100">
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">1</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">2</div>
  <div class="text-gray-800 text-center bg-gray-300 px-4 py-2 m-2">3</div>
</div>

Justify-Center and Items-Center centers the elements on the main axis and the cross axis, and they can be used in place of each other. They are the opposites of each other and will produce different results depending on what the current main axis is.

like image 32
Linus Juhlin Avatar answered Oct 20 '22 19:10

Linus Juhlin