如何将元素居中放置在

如何将元素居中放置在

本文介绍了如何将元素居中放置在 CSS Grid 的最后一行?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 CSS 网格来布局一些这样的项目...

#container {显示:网格;网格模板列:16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;}.物品 {背景:青色;白颜色;填充:20px;边距:10px;}

<div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div>

如何让最后一行居中而不是左对齐?我不能保证项目的数量,所以想让布局看起来适合任意数量的项目.

这是我应该使用 flexbox 的东西吗?或者 CSS 网格是否适合使用?

解决方案

CSS 网格不适合整行对齐,因为纵横交错的轨道挡住了去路.详细解释如下:

作为替代方案,使用带有 justify-content: center 的 flexbox.

这会打包行水平中心的所有项目.然后你的利润将它们分开.

在完全填充的行上,justify-content 将无效,因为 没有可用空间工作.

在有可用空间的行(在您的情况下,只有最后一行),项目居中.

#container {显示:弹性;flex-wrap: 包裹;对齐内容:居中;}.物品 {flex: 0 0 calc(16.66% - 20px);背景:青色;白颜色;填充:20px;边距:10px;}* {box-sizing: 边框框;}

<div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div><div class="item">Item</div>

I am using CSS grid to layout some items like this...

#container {
  display: grid;
  grid-template-columns: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}

.item {
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

How can I get the last row to be centered instead of left aligned? I can't guarantee the number of items so want to make the layout look right for any number of items.

Is this something I should be using flexbox for instead? Or are CSS grids a suitable use?

解决方案

CSS Grid isn't suited for alignment across an entire row because of crisscrossing tracks blocking the way. Here's a detailed explanation:

As an alternative, use flexbox with justify-content: center.

This packs all items in the horizontal center of the row. Then your margins push them apart.

On fully-filled rows, justify-content will have no effect since there's no free space for it to work.

On rows with free space (in your case, only the last row), the items are centered.

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  flex: 0 0 calc(16.66% - 20px);
  background: teal;
  color: white;
  padding: 20px;
  margin: 10px;
}

* {
  box-sizing: border-box;
}
<div id="container">
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
  <div class="item">Item</div>
</div>

这篇关于如何将元素居中放置在 CSS Grid 的最后一行?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-16 04:03