如何使框在 `.flex-col` Tailwindcss 中居中对齐？

Question

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

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?

Answer 1

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

Answer 2

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:)

Answer 3

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

Answer 4

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>

Answer 5

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

Answer 6

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>