如何在CSS中的居中项目之间添加恒定间距?(已编辑)

fcipmucu  于 2022-11-19  发布在  其他
关注(0)|答案(2)|浏览(137)

我想创建一个网站,其中的一部分在容器中包含两个元素:标题文本和一个按钮。我想把它们放在主轴的中心(容器),它们之间有一些空间。我不喜欢justify-content: space-around选项,因为它在中间留下了太多的空间。所以要做到这一点,我会为每个元素使用左/右边距。但我也想使用flex-wrap: wrap;,这意味着如果屏幕尺寸太小而无法容纳两个元素,css会将按钮转移到下一行。然而,每次发生这种情况时,margin-left仍然保留在按钮上,因此它看起来偏离了中心(参见image)。
有什么主意吗?谢谢。

编辑:使用媒体查询会把事情搞砸,所以我的新问题是:是否有办法使两个居中元素之间的间距在所有屏幕尺寸下保持不变而不留边距?

bvjxkvbb

bvjxkvbb1#

您只能使用CSS媒体查询为较大的屏幕尺寸设置边距

hc8w905p

hc8w905p2#

您可能正在寻找justify-content: space-evenlytext-align: centeralign-items: centerflex-wrap: wrap的组合。这将均匀地分离内容,同时当 windows 宽度不足以包含这两个元素时,允许内容无边距地环绕。
第一个

相关问题