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

问题描述 投票:-1回答:2

这似乎是一个常见问题,但我感觉自己完全被卡住了。

所以我想创建一个网站,该网站的一部分在容器中包含两个元素:标题文本和按钮。我想将它们放置在主轴(容器)的中心,并在它们之间留一些空间。我不喜欢justify-content: space-around选项,因为它在中间留了太多空间。因此,为此,我将对每个元素使用左/右页边距。但是我也想使用flex-wrap: wrap;,这意味着如果屏幕尺寸太小而无法容纳两个元素,css会将按钮转移到下一行。但是,每次发生这种情况时,margin-left仍保留在按钮上,因此它看起来偏离中心。 (查看图片)The elements were centered, but when I shrink the window, this is what happens

有什么想法吗?谢谢。

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

html css containers word-wrap centering
2个回答
0
投票

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


0
投票

您可能正在与justify-content: space-evenlyjustify-content: space-evenlytext-align: center结合使用text-align: center。当视口的宽度不足以同时包含两个元素时,这将使内容均匀地分开,同时允许其无边距地环绕。

align-items: center
align-items: center
© www.soinside.com 2019 - 2024. All rights reserved.