Question

我用某种颜色创建了.container，并在容器头中创建了其他颜色和文本。现在我想将文本居中。我能够使用网格做到这一点，但问题是我的标题颜色（标题的背景颜色）也缩小到了垂直和水平居中的位置。我只想让文字居中而不是颜色。希望我能清楚地解释。请给我解释一下我该如何实现。（

我正在使用Visual Studio。 align-item align-content align-self（位于标题上）justify-item，content，self对我没有用，请清除我的困惑

如果我将图像或徽标放在中央，则只需要在中央放置文本。我不希望背景图像受到损害，我只想使用网格。我尝试了6个网格命令align-item align-content align-self（header）justify-item，content，self对我没有任何帮助，请清除我的困惑。

我正在使用Visual Studio。 align-item align-content align-self（位于标题上）justify-item，content，self对我没有用，请清除我的困惑

<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>

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

1 个答案: