对于第一个“单行”布局,让我们解决所有 CSS 领域中最大的谜团:居中。我想让您知道,使用 place-items: center 会让此操作比您想象的容易。
首先指定 grid 作为 display 方法,然后在同一个元素上写入 place-items: center。place-items 是同时设置 align-items 和 justify-items 的快速方法。通过将其设置为 center , align-items 和 justify-items 都将设置为 center。.
.parent {
display: grid;
place-items: center;
}
这使得内容能够在父级内完美居中,而不管内部大小。
演示:https://1linelayouts.glitch.me/