在CSS网格中居中放置图像

Question

我正在尝试修复网格布局。

首先，图像应位于.container的中心。我尝试使用align-self: center;，但是没有用。

标题和段落真的搞砸了。在此之前，该段落压低了图像，所以我想如果我给它们（和标题）两个自定义grid-row值，它们将是固定的，但是相反，我所有这些元素都相互重叠。我需要正确订购它们。 H3下的段落和H1下的H3。

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: 100%;
}

.container img {
  grid-column: 1 / 2;
  grid-row: 1;
}

.container h1,
h3 {
  grid-column: 3;
  grid-row: 1;
  line-height: 0.35;
}

.container p {
  grid-column: 3;
  grid-row: 1;
  width: 350px;
}

<div class="container">
  <h1>-[IFwsI]- Jail</h1>
  <h3>More than 40 000 registered players</h3>
  <p>The most active, and one of the most successful servers. Jail has a set of rules players need to follow and enjoy the roleplay of inmates vs. CTs scenario</p>

  <img src="https://i.imgur.com/epqMIJv.jpg" height="418" width="740" />
</div>

Answer 1

为文本和图像创建列，以使其更易于管理。

看看grid-template-columns，您可以通过多种方式控制每列的​​宽度。我刚刚将它们设置为33%宽度；

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns

justify-content: center将列放在水平中心。

align-items: center垂直对齐项目。

要更改顺序，我用.column--left创建了一个新类grid-row: 1，将其移到第一列。

.container {
  display: grid;
  grid-template-columns: 33% 33%;
  justify-content: center;
  align-items: center;
  grid-gap: 10px;
  height: 100vh;
}

.column.column--left {
  grid-row: 1;
}

img {
  max-width: 100%;
  height: auto;
}

<div class="container">
  <div class="column">
    <h1>-[IFwsI]- Jail</h1>
    <h3>More than 40 000 registered players</h3>
    <p>The most active, and one of the most successful servers. Jail has a set of rules players need to follow and enjoy the roleplay of inmates vs. CTs scenario</p>
  </div>
  <div class="column column--left">
    <img src="https://i.imgur.com/epqMIJv.jpg" height="418" width="740" />
  </div>
</div>

Answer 2

  

...但是相反，我让所有这些元素相互重叠。

在您的代码中，您明确地告诉它们彼此重叠。

.container h1, h3 {
  grid-column: 3;
  grid-row: 1;
  line-height: 0.35;
}

.container p {
  grid-column: 3;
  grid-row: 1;
  width: 350px;
}

h1，h3和p都放在第3列第1行中。为什么它们不重叠？

这是另一种可能对您有用的方法：

.container {
  display: grid;
  height: 100vh;
  align-items: center;
  grid-column-gap: 20px;
  grid-template-columns: 1fr 2fr 2fr 1fr;
  grid-template-areas: " . pic header1 . "
                       " . pic header3 . "
                       " . pic  ptext  . "
                       " . pic  ptext  . "                       
}

.container > h1  { grid-area: header1; }

.container > h3  { grid-area: header3; }

.container > p   { grid-area: ptext;   }

.container > div { grid-area: pic;     }

.container img   { width: 100%; object-fit: contain;  }

*                { margin: 0; }

<div class="container">
  <h1>-[IFwsI]- Jail</h1>
  <h3>More than 40 000 registered players</h3>
  <p>The most active, and one of the most successful servers. Jail has a set of rules players need to follow and enjoy the roleplay of inmates vs. CTs scenario</p>
  <div>
    <img src="https://i.imgur.com/epqMIJv.jpg" height="418" width="740" />
  </div>
</div>

jsFiddle demo

这是使用Firefox's grid overlay tool的代码的可视化显示。