英文:
Centering element in grid layout Tailwind
问题
我在尝试将一个元素置于网格布局的中央。我想让蓝色边框的项目位于红色项目的中央。
我已经在 play.tailwind 中添加了代码: https://play.tailwindcss.com/cmaOoeaZqe
我尝试过使用 flex place-items-center、justify-center、justify-self-center 等不同的方法，但都不起作用。有人有什么想法吗？
英文:
I'm struggeling to center a element in a grid layout. I want the blue bordered item in the center of the red item.
I added the code in play.tailwind: https://play.tailwindcss.com/cmaOoeaZqe
I've tried different things with flex place-items-center, justify-center, justify-self-center, etc but it doesn't work.
Does anyone have any ideas?
答案1
得分: 1
你需要在父级 div 中添加 flex flex-col。然后，将标签中的 mb-4 ml-1 替换为 mx-auto。mx-auto 会将左右边距都设置为自动，基本上是将标签居中对齐。
查看：https://play.tailwindcss.com/5z7IcmnM9l
英文:
You need to add flex flex-col to the parent div. Than, replace the mb-4 ml-1 from the label with mx-auto. The mx-auto will set both left and right margins to auto, which basically aligns the label centered.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论