如何在`.flex-col` Tailwindcss中使框对齐中心？答案

【问题标题】：How to make box align center inside `.flex-col` Tailwindcss?如何在`.flex-col` Tailwindcss中使框对齐中心？
【发布时间】：2018-07-01 17:48:51
【问题描述】：

我想使用 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>

但是没用，我错过了什么？

【问题讨论】：

要获得正确答案，请在重现问题的问题中提供工作代码 sn-p，并缩进发布的代码，以便阅读。
嗨@LGSon 对不起我的线程:(我是stackoverflow的新手。
Stackoverflow 的新成员？？...您成为会员已有 2 年多了，发布了 20 多个问题。不过，现在您知道该怎么做了。

标签： html css flexbox tailwind-css

【解决方案1】：

我认为这可能会有所帮助！如果您希望内容位于 x、y 轴中心，可以使用 h-screen。

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

【讨论】：

【解决方案2】：

我不确定您是否只是想将锚标签置于中心位置，但如果是这种情况，那么您可以简单地使用 text-align center。如果遗漏了什么，请分享您的代码。

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

【讨论】：

【解决方案3】：

如果您试图使容器居中。使用左右边距并将它们设置为自动。

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

【讨论】：