我想创建一个网站,其中的一部分在容器中包含两个元素:标题文本和一个按钮。我想把它们放在主轴的中心(容器),它们之间有一些空间。我不喜欢justify-content: space-around
选项,因为它在中间留下了太多的空间。所以要做到这一点,我会为每个元素使用左/右边距。但我也想使用flex-wrap: wrap;
,这意味着如果屏幕尺寸太小而无法容纳两个元素,css会将按钮转移到下一行。然而,每次发生这种情况时,margin-left
仍然保留在按钮上,因此它看起来偏离了中心(参见image)。
有什么主意吗?谢谢。
编辑:使用媒体查询会把事情搞砸,所以我的新问题是:是否有办法使两个居中元素之间的间距在所有屏幕尺寸下保持不变而不留边距?
2条答案
按热度按时间bvjxkvbb1#
您只能使用CSS媒体查询为较大的屏幕尺寸设置边距
hc8w905p2#
您可能正在寻找
justify-content: space-evenly
与text-align: center
、align-items: center
和flex-wrap: wrap
的组合。这将均匀地分离内容,同时当 windows 宽度不足以包含这两个元素时,允许内容无边距地环绕。第一个