Html 在 CSS 网格中居中

Question

提问by beetroot

I'm trying to create a simple page with CSS Grid.

我正在尝试使用 CSS Grid 创建一个简单的页面。

What I'm failing to do is center the text from the HTML to the respective grid cells.

我没有做的是将文本从 HTML 居中到相应的网格单元格。

I've tried placing content in separate divs both inside and outside of the left_bgand right_bgselectors and playing with some of the CSS properties to no avail.

我尝试将内容放在and选择器的div内部和外部的单独s 中，并尝试使用一些 CSS 属性但无济于事。left_bgright_bg

How do I do this?

我该怎么做呢？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.left_text {
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

.right_text {
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  position: relative;
  z-index: 1;
  justify-self: center;
  font-family: Raleway;
  font-size: large;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
  </div>
</div>

<div class="right_bg">
  <!--right background color of the page-->
</div>

<div class="left_text">
  <!--left side text content-->
  <p>Review my stuff</p>

  <div class="right_text">
    <!--right side text content-->
    <p>Hire me!</p>
  </div>
</div>

Answer 1

回答by Michael Benjamin

This answer has two main sections:

这个答案有两个主要部分：

Understanding how alignment works in CSS Grid.
Six methods for centering in CSS Grid.

了解对齐方式在 CSS Grid 中的工作原理。
在 CSS Grid 中居中的六种方法。

If you're only interested in the solutions, skip the first section.

如果您只对解决方案感兴趣，请跳过第一部分。

The Structure and Scope of Grid layout

网格布局的结构和范围

To fully understand how centering works in a grid container, it's important to first understand the structure and scope of grid layout.

要完全理解在网格容器中居中是如何工作的，首先了解网格布局的结构和范围很重要。

The HTML structureof a grid container has three levels:

网格容器的 HTML结构分为三个层次：

the container
the item
the content

容器
项目
内容

Each of these levels is independent from the others, in terms of applying grid properties.

在应用网格属性方面，这些级别中的每一个都独立于其他级别。

The scopeof a grid container is limited to a parent-child relationship.

网格容器的范围仅限于父子关系。

This means that a grid container is always the parent and a grid item is always the child. Grid properties work only within this relationship.

这意味着网格容器始终是父项，而网格项始终是子项。网格属性仅在此关系中起作用。

Descendants of a grid container beyond the children are not part of grid layout and will not accept grid properties. (At least not until the subgridfeature has been implemented, which will allow descendants of grid items to respect the lines of the primary container.)

超出孩子的网格容器的后代不是网格布局的一部分，不会接受网格属性。（至少在该subgrid功能实现之前不会，这将允许网格项目的后代尊重主容器的行。）

Here's an example of the structure and scope concepts described above.

下面是上述结构和范围概念的示例。

Imagine a tic-tac-toe-like grid.

想象一个井字棋状的网格。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

You want the X's and O's centered in each cell.

您希望 X 和 O 在每个单元格中居中。

So you apply the centering at the container level:

所以你在容器级别应用居中：

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

But because of the structure and scope of grid layout, justify-itemson the container centers the grid items, not the content (at least not directly).

但是由于网格布局的结构和范围，justify-items在容器上居中的是网格项，而不是内容（至少不是直接）。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

Same problem with align-items: The content may be centered as a by-product, but you've lost the layout design.

同样的问题align-items：内容可能作为副产品居中，但你已经失去了布局设计。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
  justify-items: center;
  align-items: center;
}

section {
    border: 2px solid black;
    font-size: 3em;
}

<article>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
    <section>O</section>
    <section>X</section>
</article>

To center the content you need to take a different approach. Referring again to the structure and scope of grid layout, you need to treat the grid item as the parent and the content as the child.

要使内容居中，您需要采取不同的方法。再次参考网格布局的结构和范围，您需要将网格项视为父项，将内容视为子项。

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

article {
  display: inline-grid;
  grid-template-rows: 100px 100px 100px;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 3px;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid black;
  font-size: 3em;
}

<article>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
  <section>O</section>
  <section>X</section>
</article>

jsFiddle demo

jsFiddle 演示

Six Methods for Centering in CSS Grid

CSS Grid 居中的六种方法

There are multiple methods for centering grid items and their content.

有多种方法可以使网格项及其内容居中。

Here's a basic 2x2 grid:

这是一个基本的 2x2 网格：

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Flexbox

弹性盒

For a simple and easy way to center the content of grid items use flexbox.

要使网格项目的内容居中，请使用 flexbox 的简单方法。

More specifically, make the grid item into a flex container.

更具体地说，将网格项变成一个 flex 容器。

There is no conflict, spec violation or other problem with this method. It's clean and valid.

此方法不存在冲突、违反规范或其他问题。它干净有效。

grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

See this post for a complete explanation:

有关完整说明，请参阅此帖子：

How to Center Elements Vertically and Horizontally in Flexbox

如何在 Flexbox 中垂直和水平居中元素

Grid Layout

网格布局

In the same way that a flex item can also be a flex container, a grid item can also be a grid container. This solution is similar to the flexbox solution above, except centering is done with grid, not flex, properties.

就像弹性项目也可以是弹性容器一样，网格项目也可以是网格容器。这个解决方案类似于上面的 flexbox 解决方案，除了居中是使用 grid 而不是 flex 属性完成的。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: grid;            /* new */
  align-items: center;      /* new */
  justify-items: center;    /* new */
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

`auto`margins

`auto`边距

Use margin: autoto vertically and horizontally center grid items.

使用margin: auto垂直和水平中心网格项目。

grid-item {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

To center the content of grid items you need to make the item into a grid (or flex) container, wrap anonymous items in their own elements (since they cannot be directly targeted by CSS), and apply the margins to the new elements.

要使网格项目的内容居中，您需要将项目放入网格（或 flex）容器中，将匿名项目包装在它们自己的元素中（因为它们不能被 CSS 直接定位），并将边距应用于新元素。

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  display: flex;
}

span, img {
  margin: auto;
}

/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Box Alignment Properties

框对齐属性

When considering using the following properties to align grid items, read the section on automargins above.

在考虑使用以下属性对齐网格项时，请阅读auto上面有关边距的部分。

align-items
justify-items
align-self
justify-self

align-items
justify-items
align-self
justify-self

https://www.w3.org/TR/css-align-3/#property-index

`text-align: center`

To center content horizontally in a grid item, you can use the text-alignproperty.

要在网格项中水平居中内容，您可以使用该text-align属性。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;  /* new */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Note that for vertical centering, vertical-align: middlewill not work.

请注意，对于垂直居中，vertical-align: middle将不起作用。

This is because the vertical-alignproperty applies only to inline and table-cell containers.

这是因为该vertical-align属性仅适用于内联和表格单元格容器。

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
  text-align: center;     /* <--- works */
  vertical-align: middle; /* <--- fails */
}


/* can ignore styles below; decorative only */
grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}
grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item>this text should be centered</grid-item>
  <grid-item>this text should be centered</grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

One might say that display: inline-gridestablishes an inline-level container, and that would be true. So why doesn't vertical-alignwork in grid items?

有人可能会说display: inline-grid建立了一个内联级容器，这是真的。那么为什么vertical-align在网格项中不起作用呢？

The reason is that in a grid formatting context, items are treated as block-level elements.

原因是在网格格式化上下文中，项目被视为块级元素。

6.1. Grid Item Display
The displayvalue of a grid item is blockified: if the specified displayof an in-flow child of an element generating a grid container is an inline-level value, it computes to its block-level equivalent.

6.1. 网格项目显示
display网格项的值是块化的：如果display生成网格容器的元素的流入子元素的指定是内联级值，则计算为其块级等效值。

In a block formatting context, something the vertical-alignproperty was originally designed for, the browser doesn't expect to find a block-level element in an inline-level container. That's invalid HTML.

在块格式化上下文中，该vertical-align属性最初是为某些东西设计的，浏览器不希望在内联级容器中找到块级元素。那是无效的 HTML。

CSS Positioning

CSS 定位

Lastly, there's a general CSS centering solution that also works in Grid: absolute positioning

最后，有一个通用的 CSS 居中解决方案也适用于 Grid：绝对定位

This is a good method for centering objects that need to be removed from the document flow. For example, if you want to:

这是将需要从文档流中删除的对象居中的好方法。例如，如果您想：

Simply set position: absoluteon the element to be centered, and position: relativeon the ancestor that will serve as the containing block (it's usually the parent). Something like this:

只需设置position: absolute要居中的元素，以及position: relative将用作包含块的祖先元素（通常是父元素）。像这样的东西：

grid-item {
  position: relative;
  text-align: center;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 75px;
  grid-gap: 10px;
}

grid-item {
  position: relative;
  text-align: center;
}

span, img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* can ignore styles below; decorative only */

grid-container {
  background-color: lightyellow;
  border: 1px solid #bbb;
  padding: 10px;
}

grid-item {
  background-color: lightgreen;
  border: 1px solid #ccc;
}

<grid-container>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><span>this text should be centered</span></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
  <grid-item><img src="http://i.imgur.com/60PVLis.png" width="50" height="50" alt=""></grid-item>
</grid-container>

Here's a complete explanation for how this method works:

这是有关此方法如何工作的完整说明：

Element will not stay centered, especially when re-sizing screen

元素不会保持居中，尤其是在调整屏幕大小时

Here's the section on absolute positioning in the Grid spec:

这是网格规范中关于绝对定位的部分：

https://www.w3.org/TR/css3-grid-layout/#abspos

https://www.w3.org/TR/css3-grid-layout/#abspos

Answer 2

回答by Vadim Ovchinnikov

You can use flexbox to center your text. By the way no need for extra containers because text is considered as anonymous flex item.

您可以使用 flexbox 将文本居中。顺便说一句，不需要额外的容器，因为文本被视为匿名弹性项目。

From flexbox specs:

从flexbox 规格：

Each in-flow child of a flex containerbecomes a flex item, and each contiguous run of text that is directly contained inside a flex containeris wrapped in an anonymous flex item. However, an anonymous flex item that contains only white space(i.e. characters that can be affected by the white-spaceproperty) is not rendered (just as if it were display:none).

flex 容器的每个流入子元素都成为一个flex item，并且直接包含在flex 容器中的每个连续文本都被包裹在一个匿名的flex item 中。然而，一个只包含空格（即可能受white-space属性影响的字符）的匿名弹性项目不会被渲染（就像它是display:none）。

So just make grid items as flex containers (display: flex), and add align-items: centerand justify-content: centerto center both vertically and horizontally.

因此，只需将网格项设为弹性容器 ( display: flex)，并添加align-items: center和justify-content: center以垂直和水平居中。

Also performed optimization of HTML and CSS:

还对 HTML 和 CSS 进行了优化：

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  
  font-family: Raleway;
  font-size: large;
}

.left_bg,
.right_bg {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left_bg {
  background-color: #3498db;
}

.right_bg {
  background-color: #ecf0f1;
}

<div class="container">
  <div class="left_bg">Review my stuff</div>
  <div class="right_bg">Hire me!</div>
</div>

Answer 3

回答by Konrad Albrecht

Do not even try to use flex; stay with css grid!! :)

甚至不要尝试使用 flex；留在CSS网格！:)

https://jsfiddle.net/ctt3bqr0/

justify-self: center;
align-self: center;

is doing the centering work here.

在这里做居中工作。

If you want to center something that is inside divthat is inside grid cell you need to define nested grid in order to make it work. (Please look at the fiddle both examples shown there.)

如果要将div网格单元内部的内容居中，则需要定义嵌套网格以使其工作。（请查看此处显示的两个示例的小提琴。）

https://css-tricks.com/snippets/css/complete-guide-grid/

Cheers!

干杯!

Answer 4

回答by CloudBranch

The CSS place-itemsshorthand property sets the align-items and justify-items properties, respectively. If the second value is not set, the first value is also used for it.

CSS place-items速记属性分别设置 align-items 和 justify-items 属性。如果未设置第二个值，则也使用第一个值。

.parent {
  display: grid;
  place-items: center;
}

Answer 5

回答by Younis Ar M

Try using flex:

尝试使用 flex：

Plunker demo : https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

Plunker 演示：https://plnkr.co/edit/nk02ojKuXD2tAqZiWvf9

/* Styles go here */

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.right_bg {
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

HTML

    <div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Answer 6

回答by Renato siqueira

You want this?

你要这个？

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100vh;
  grid-gap: 0px 0px;
}

.left_bg {
  display: subgrid;
  background-color: #3498db;
  grid-column: 1 / 1;
  grid-row: 1 / 1;
  z-index: 0;
}

.right_bg {
  display: subgrid;
  background-color: #ecf0f1;
  grid-column: 2 / 2;
  grid_row: 1 / 1;
  z-index: 0;
}

.text {
  font-family: Raleway;
  font-size: large;
  text-align: center;
}

<div class="container">
  <!--everything on the page-->

  <div class="left_bg">
    <!--left background color of the page-->
    <div class="text">
      <!--left side text content-->
      <p>Review my stuff</p>
    </div>
  </div>

  <div class="right_bg">
    <!--right background color of the page-->
    <div class="text">
      <!--right side text content-->
      <p>Hire me!</p>
    </div>
  </div>
</div>

Answer 7

回答by Aft3rL1f3

I know this question is a couple years old, but I am surprised to find that no one suggested:

我知道这个问题已经有几年了，但我惊讶地发现没有人建议：

   text-align: center;

this is a more universal property than justify-content, and is definitely not unique to grid, but I find that when dealing with text, which is what this question specifically asks about, that it aligns text to the center with-out affecting the space between grid items, or the vertical centering. It centers text horizontally where its stands on its vertical axis. I also find it to remove a layer of complexity that justify-content and align-items adds. justify-content and align-items affects the entire grid item or items, text-align centers the text without affecting the container it is in. Hope this helps.

这是一个比 justify-content 更通用的属性，并且绝对不是网格所独有的，但我发现在处理文本时，这是这个问题特别询问的内容，它将文本与中心对齐而不影响空间网格项之间，或垂直居中。它将文本水平居中放置在其垂直轴上。我还发现它消除了 justify-content 和 align-items 增加的一层复杂性。justify-content 和 align-items 影响整个网格项目或项目， text-align 将文本居中而不影响它所在的容器。希望这会有所帮助。

Html 在 CSS 网格中居中

提问by beetroot

回答by Michael Benjamin

The Structure and Scope of Grid layout

网格布局的结构和范围

Six Methods for Centering in CSS Grid

CSS Grid 居中的六种方法

Flexbox

弹性盒

Grid Layout

网格布局

`auto`margins

`auto`边距

Box Alignment Properties

框对齐属性

`text-align: center`

`text-align: center`

CSS Positioning

CSS 定位

回答by Vadim Ovchinnikov

回答by Konrad Albrecht

回答by CloudBranch

回答by Younis Ar M

回答by Renato siqueira

回答by Aft3rL1f3

相关推荐

最近更新

标签

Html 在 CSS 网格中居中

提问by beetroot

回答by Michael Benjamin

The Structure and Scope of Grid layout

网格布局的结构和范围

Six Methods for Centering in CSS Grid

CSS Grid 居中的六种方法

Flexbox

弹性盒

Grid Layout

网格布局

automargins

auto边距

Box Alignment Properties

框对齐属性

text-align: center

text-align: center

CSS Positioning

CSS 定位

回答by Vadim Ovchinnikov

回答by Konrad Albrecht

回答by CloudBranch

回答by Younis Ar M

回答by Renato siqueira

回答by Aft3rL1f3

相关推荐

Html 如何在引导程序 3 中包含字形

Html 未找到 Angular 4 img src

如何为 HTML 选择设置默认值？

Html 从数组打字稿中删除对象（Angular 2）

相关推荐

最近更新

标签

`auto`margins

`auto`边距

`text-align: center`

`text-align: center`