如何在CSS中居中的项目之间添加空间?

问题描述 投票:0回答: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个回答
1
投票

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


1
投票

您可能正在与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.