英文:
Center aligning child div, while parent has padding
问题
我有一个带有左边填充16px（1rem）的父div，我决定将“仅第一个子元素”居中对齐，考虑到父元素的16px填充。我正在使用tailwindcss。
以下是我的代码：
<div class="flow-root w-[300px] pl-4 h-[200px]">
<div class="">这个子元素应该居中</div>
<div class=""></div>
<div class=""></div>
</div>
1- 请记住，我必须使用display: flow-root，否则我会遇到另一个错误。
2- margin-left 和 margin-right: auto 对子元素不起作用，因为它也会添加父元素的填充（然后它就不居中了）。
3- 尝试过使用相对定位，然后 right-[16px]，然后再次使用 margin-left 和 margin-right: auto，但在不同屏幕尺寸上也不起作用。
4- 如果你不熟悉tailwind，欢迎提供CSS帮助。
英文:
So I have a Parent div with padding left of 16px (1rem), I decided to center align "only first child", considering the 16px of parent padding. I'm using tailwindcss BTW.
here is my code:
<div class="flow-root w-[300px] pl-4 h-[200px]">
<div class="">this child should be center</div>
<div class=""></div>
<div class=""></div>
</div>
1- keep in mind i have to use display:flow-root because otherwise I face another bug.
2- margin left and right : auto is not working for child because it's also adding parent's padding (then it's not center).
3- tried position relative and then right-[16px] and then again margin left and right auto which didnt work either on different screen sizes.
4- if by any case you don't know tailwind, CSS help is appreciated.
答案1
得分: 1
你可以考虑添加margin-right，与padding-left的大小相同，以使margin-right“抵消”相同间距的右边缘，从而使<div>在父元素中居中：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flow-root w-[300px] pl-4 h-[200px] border border-red-500">
<div class="mr-4 bg-green-500">this child should be center</div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
这是一个额外的解决方案，用于处理子元素具有固定宽度为100px的情况，以回应评论者的问题。您可以应用margin-left: auto; margin-right: auto，然后通过应用父元素的padding-left的一半，通过应用等于负父元素padding-left的一半的transform: translateX()来进行偏移：
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flow-root w-[300px] pl-4 h-[200px] border border-red-500">
<div class="mx-auto w-[100px] -translate-x-2 bg-green-500">this child should be center</div>
<div></div>
<div></div>
</div>
<!-- end snippet -->
英文:
You could consider adding margin-right that is the same amount as the padding-left so that the margin-right "offsets" the right edge by the same amount of spacing, thus making the <div> centered within the parent:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flow-root w-[300px] pl-4 h-[200px] border border-red-500">
<div class="mr-4 bg-green-500">this child should be center</div>
<div class=""></div>
<div class=""></div>
</div>
<!-- end snippet -->
Here is an additional solution for if the child has a fixed width of 100px to address the comment from OP. You could apply margin-left: auto; margin-right: auto and then offset the parent padding-left by applying half of the parent padding-left by applying transform: translateX() equal to negative half of the padding-left:
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<script src="https://cdn.tailwindcss.com/3.3.2"></script>
<div class="flow-root w-[300px] pl-4 h-[200px] border border-red-500">
<div class="mx-auto w-[100px] -translate-x-2 bg-green-500">this child should be center</div>
<div class=""></div>
<div class=""></div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论