CODEWITHSUNDEEP
htmlcssflexboxtailwind-css
Muh Ghazali Akbar
Muh Ghazali Akbar

Reputation: 1269

How to make box align center inside `.flex-col` Tailwindcss?

I want to make this box align to center inside .flex-col using tailwind CSS.

enter image description here

I have tried:

<div data-v-bca28ca2="" data-v-925ac5ae="" class="flex justify-center flex-col">
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Client Services</span></div>
    </a>
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Human Capital</span></div>
    </a>
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Media</span></div>
    </a>
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Production</span></div>
    </a>
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Project Management</span></div>
    </a>
    <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
        <div data-v-bca28ca2="" class="flex ml-4">
            <label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Strategy</span></div>
    </a>
</div>

But didn't work, what did I miss?

Upvotes: 7

Views: 22175

Answers (7)

Jnr
Jnr

Reputation: 1684

The why:

In Tailwind the items-center is not only used to "align items" center from top to bottom for rows as their documentation shows, but it's also used in columns to align items center in the horizontal direction.

The main axis is determined by the flex-direction properties (column or row etc.). The cross axis which is perpendicular to main is where the items shift. So, if the main axis (in your case) is column, then you use the items-center to position items in the horizontal direction.

In summary:

Your main axis determines your flex-direction while items-center is used along the cross axis which is perpendicular to main.

Upvotes: 1

person zen
person zen

Reputation: 101

Add "items-center" to your class like this:

<div class="flex flex-col items-center">
<a> lorem </a>
<a> lorem </a>
.
.
.
</div>

my first contribution on stackoverflow :)

Upvotes: 8

Erryza Nur Alif
Erryza Nur Alif

Reputation: 151

<div class="flex flex-col justify-center items-center">
  
</div>

Upvotes: 14

Muhammad Gata
Muhammad Gata

Reputation: 391

if you use flex-col in tailwind, justify-center will center the item vertically. so, to center items horizontally, you can use items-center instead.

It happened because you changed the default behavior of flexbox which was originally row to col

Upvotes: 3

CsAlkemy
CsAlkemy

Reputation: 366

I think this may help! you can use h-screen if you want your content in the x, y-axis center.

<div class="flex flex-col">
  <div class="m-auto">
    <h3>1</h3>
    <button>2</button>
  </div>
</div>

Upvotes: 4

Jonny
Jonny

Reputation: 1329

If you are trying to center the container. Use margin left and right and set them to auto.

.yourClassName{
margin-left:auto;
margin-right:auto;
}

Upvotes: 0

Asif Karim Bherani
Asif Karim Bherani

Reputation: 1093

I am not sure if you are just trying to bring the anchor tags to center, but if thats the case then you can simply use text-align center. Please share your code if am missing something.

.flex {
  display: flex;
  flex-direction: column;
  text-align: center;
}
<div data-v-bca28ca2="" data-v-925ac5ae="" class="flex justify-center flex-col">
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Client Services</span></div>
  </a>
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Human Capital</span></div>
  </a>
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Media</span></div>
  </a>
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Production</span></div>
  </a>
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Project Management</span></div>
  </a>
  <a data-v-bca28ca2="" class="w-full md:w-1/2 lg:w-1/4 my-2 py-4 text-center border-2 rounded">
    <div data-v-bca28ca2="" class="flex ml-4"><label data-v-bca28ca2="" class="fa fa-circle-o"></label> <span data-v-bca28ca2="" class="w-full">Strategy</span></div>
  </a>
</div>

Upvotes: 0

Related Questions