css Question posted in
Some basic documentation can be found here.

Tailwind CSS "justify-center" works if used with "flex-row" but doesnt work with "flex-col"

I was recently building a website using NuxtJs and ran into a problem: I cant center components in a that are in a flex column. but when i removed the "flex-col" class everything seemed to work fine.
Here’s my code:

<script setup>
</script>
<template>

    <div class="bg-slate-800">
    <div class="h-48"></div>
      <div class="flex flex-col  justify-center">
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
      </div>
    </div>
</template>

As you can see there’s only one flex element. And i also set the width of the elements so i can be sure those divs werent taking all the width. Here’s the result
result

But when i remove the "flex-col" statement, it all goes well:
flex-row

I tried most of the solutions i found on the internet. Like ‘m-0’, making the elements flex and so on.

Tags:

2

Answers


  1. 0

    Not completely sure about what you really want, but I think what you are looking for is align-items: center on the flex parent to have the flex items centered horizontally when flex-direction is "column".

    Login or Signup to reply.
  2. 0

    Using flex-col means that cross axis runs along the rows where you can using items-center :

     <div class="flex flex-col  items-center">
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
        <div class="h-40 w-20 "><h1 class="text-white">Hi</h1></div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search