CSS 网格垂直和水平对齐，而不会干扰背景颜色或图像

Question

我用一些颜色创建了.container，并在那个容器标题中用一些其他颜色和文本。 现在我想将文本居中。 我可以用网格做到这一点，但问题是我的标题颜色(标题的背景颜色)也缩小到垂直和水平居中。 我只希望文本进入中心而不是颜色。 希望我解释清楚。 请解释我如何实现这一目标。 (

我正在使用Visual Studio。 对齐项目 对齐内容 对齐自我(在标题上)对齐项目，内容，自我 对我没有任何用处 请清除我的困惑

如果我将图像或徽标放在中心，我只需要文本居中。 我不希望背景图像受到损害，我只想使用网格。 我尝试了 6 个网格命令 对齐项目 对齐内容 对齐自我(在标题上)证明项目，内容，自我 对我没有任何用处，请清除我的困惑。

我正在使用Visual Studio。 对齐项目 对齐内容 对齐自我(在标题上)对齐项目，内容，自我 对我没有任何用处 请清除我的困惑

<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>
</div>

Answer 1

要将元素居中到网格并避免它们缩小，您需要在您的孩子身上再次设置网格系统 您可以使用 flex 或 grid 。

示例(可能不是您的网格，但需要一个您没有提供的基础，如果这不能回答您的问题，那么请澄清您的问题)

• Flex 可用于网格子项，以允许居中对齐。

.container> div {
display:flex;
align-items:center;
justify-content:center;

background:tomato;
border:solid;
}
/* reconstruction of a grid */
.container {
display:grid;
grid-template-columns:repeat(4,1fr);
grid-auto-rows: minmax(150px,1fr);
grid-gap:1em;
}
.container .header, .container .footer {
background:lightblue;
grid-column:span 4;
}
.small-box-1 {
grid-column:2;
}
.main-content{
grid-column:2 / span 3
}
.side-bar {
grid-column:1;
grid-row:2 / span 2;
}

<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>

网格

• 也可以用于网格子项，以允许居中对齐。

.container>div {
display: grid;
align-items: center;
justify-content: center;


background: tomato;
border: solid;
}
/* reconstruction of a grid */
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: minmax(150px, 1fr);
grid-gap: 1em;
}
.container .header,
.container .footer {
background: lightblue;
grid-column: span 4;
}
.small-box-1 {
grid-column: 2;
}
.main-content {
grid-column: 2 / span 3
}
.side-bar {
grid-column: 1;
grid-row: 2 / span 2;
}

<div class="container">
<div class="header">This is header</div>
<div class="small-box-1">Small-Box1</div>
<div class="small-box-2">Small-Box2</div>
<div class="small-box-3">Small-Box3</div>
<div class="main-content">Main Content</div>
<div class="side-bar">Side-Bar</div>
<div class="footer">footer</div>
</div>