我想讓這個(gè)盒子內(nèi)部居中對(duì)齊。使用順風(fēng)CSS的flex-col。

我試過(guò)了:

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

但沒(méi)起作用，我錯(cuò)過(guò)了什么？

添加& quot項(xiàng)目-中心& quot像這樣給你上課:

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

我在stackoverflow上的第一篇投稿:)

我覺(jué)得這個(gè)可能有幫助！如果您希望您的內(nèi)容位于x、y軸中心，您可以使用h-screen。

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

如果您在tailwind中使用flex-col，justify-center會(huì)將項(xiàng)目垂直居中。因此，要將項(xiàng)目水平居中，可以使用items-center。

發(fā)生這種情況是因?yàn)槟牧薴lexbox的默認(rèn)行為，它最初是row到col

我不確定你是否只是想讓錨定標(biāo)簽居中，但是如果是這樣的話(huà)，你可以簡(jiǎn)單地使用文本對(duì)齊居中。如果我遺漏了什么，請(qǐng)分享你的代碼。

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

如果你想讓容器居中。使用左邊距和右邊距，并將它們?cè)O(shè)置為自動(dòng)。

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

為什么:

在《順風(fēng)》中，項(xiàng)目中心不僅用于& quot對(duì)齊項(xiàng)目& quot如文檔所示，行從上到下居中，但它也用于列中，使項(xiàng)目在水平方向居中對(duì)齊。

主軸由彎曲方向?qū)傩?列或行等)確定。) .垂直于主軸的橫軸是項(xiàng)目移動(dòng)的地方。因此，如果主軸(在您的例子中)是column，那么您可以使用items-center在水平方向放置項(xiàng)目。

總而言之:

您的主軸決定了您的伸縮方向，而項(xiàng)目中心則沿著垂直于主軸的橫軸使用。