如何使框对齐中心内`.flex-col` Tailwindcss?

6pp0gazn  于 2023-05-19  发布在  其他
关注(0)|答案(7)|浏览(143)

我想使用tailwind CSS将这个框对齐到.flex-col内部的中心。

我试过:

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

但没有成功,我错过了什么?

b5lpy0ml

b5lpy0ml1#

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

kh212irz2#

将“items-center”添加到您的类中,如下所示:

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

我在stackoverflow上的第一个贡献:)

ebdffaop

ebdffaop3#

我想这可能有帮助!你可以使用h-screen,如果你想你的内容在x,y轴中心。

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

weylhg0b4#

如果你在tailwind中使用flex-coljustify-center将垂直居中显示项目。因此,要使项目水平居中,可以使用items-center
这是因为您将flexbox的默认行为(最初为row)更改为col

ftf50wuq

ftf50wuq5#

我不确定你是否只是想把锚标记到中心,但如果是这样的话,你可以简单地使用文本对齐中心。请分享您的代码,如果我错过了什么.

.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>
9vw9lbht

9vw9lbht6#

如果您试图将容器居中。使用margin left和right并将它们设置为自动。

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

nukf8bse7#

  • 原因 *

在Tailwind中,items-center不仅用于从上到下“对齐项目”,如文档所示,还用于列中,以水平方向对齐项目中心。

    • 轴由flex-direction属性(columnrow等)确定。垂直于main的横轴**是项目移动的位置。因此,如果主轴(在您的情况下)是column,则使用items-center在水平方向上定位项目。
  • 总结:*

您的main轴确定您的flex-direction,而items-center沿着垂直于main的cross轴。

相关问题