我想使用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>
但没有成功,我错过了什么?
7条答案
按热度按时间b5lpy0ml1#
kh212irz2#
将“items-center”添加到您的类中,如下所示:
我在stackoverflow上的第一个贡献:)
ebdffaop3#
我想这可能有帮助!你可以使用
h-screen
,如果你想你的内容在x,y轴中心。weylhg0b4#
如果你在tailwind中使用
flex-col
,justify-center
将垂直居中显示项目。因此,要使项目水平居中,可以使用items-center
。这是因为您将flexbox的默认行为(最初为row)更改为col
ftf50wuq5#
我不确定你是否只是想把锚标记到中心,但如果是这样的话,你可以简单地使用文本对齐中心。请分享您的代码,如果我错过了什么.
9vw9lbht6#
如果您试图将容器居中。使用margin left和right并将它们设置为自动。
nukf8bse7#
在Tailwind中,
items-center
不仅用于从上到下“对齐项目”,如文档所示,还用于列中,以水平方向对齐项目中心。flex-direction
属性(column
或row
等)确定。垂直于main的横轴**是项目移动的位置。因此,如果主轴(在您的情况下)是column
,则使用items-center
在水平方向上定位项目。您的main轴确定您的flex-direction,而
items-center
沿着垂直于main的cross轴。