居中 CSS 网格内容并创建背景图片

Question

我已经坚持了很长一段时间，而且我对 css 还是个新手。我的目标是制作一个 3 列布局，其中第一列和最后一列为空，它们将用作页面的页边距（不确定这是不是正确的词，因为我知道有一个边距属性）。在中心列中，我试图为每一行放置一个 flexbox，以将标题、引语和标语居中。艺术家名单将显示在中间栏的右下角。但是，我注意到内容从来没有集中在我的显示器上，我也不知道为什么。此外，我似乎无法弄清楚如何使背景图像跨越整个容器或中心列。我希望内容（标题、口号、报价、艺术家致谢）可以位于背景图像之上，并且背景图像的最大宽度可以与中心栏相似。这是一些代码（我现在注释掉背景图像的东西以查看间距）：

html

<section class="welcome">
    <div class="welcome-container">
        <div id="welcome-title">Some Title</div>
        <div class="welcome-slogan">Slogan</div>
        <div class="welcome-quote fst-italic">"A quote" -Person</div>
        <div class="artist-credit">Image by <a href="https://google.com">Artist</a></div>
        <!-- <div class="welcome-cover"><img src="/images/welcome_image_bw.png"/></div> -->
    </div>
</section>

CSS

.welcome {
    z-index: 2;
}

.welcome-container {
    display: grid; // make the homepage container a css grid (exclude header/footer)
    grid-template-columns: auto fit-content(1200px) auto; // 12 cols (max) and can style as desired
    grid-template-rows: 400px, auto, 100px, 100px; // title, slogan, quote, creds
    justify-content: center; // content is left to right
    
    z-index: 1;

    // background: 
    //     url("https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg") green
    //     scroll // fixed to keep img despite scroll
    //     no-repeat;

    // background-size: 20% auto;
}

#welcome-title {
    grid-column: 2 / span 1; 
    display: flex;
    justify-content: center;


    font-size: 60px;
    font-family: 'Roboto Mono';
    font-weight: 400;
    color: var(--color-dark);

    
}

.welcome-slogan {
    
    grid-column: 2 / span 1; 
    display: flex;
    justify-content: center;

    font-size: 28px;
    font-family: 'Roboto Mono';
    font-weight: 300;
    color: var(--color-med);
}

.welcome-quote {
    grid-column: 2 / span 1;
    display: flex;
    justify-content: center;

    font-size: 18px;
    font-family: 'Roboto Mono';
    font-weight: 300;
    color: var(--color-dark);
}

.welcome-cover {
    grid-column: 1 / -1;
    position: relative;
    width: 100%; // make sure doesnt exceed page horizontally
    height: 100%;
    object-fit: cover;
    z-index: 0; // image in background
    background-color: var(--color-dark); // in case img doesnt load
}

以下是一些屏幕截图，以显示页面未对齐的情况：

总而言之，我正在努力完成以下工作：

1. 如何使网格的中心列居中？如何设置此中心列的最大宽度（我试过 fit-content()）。为什么检查元素面板中出现额外的网格单元格？
2. 如何在欢迎容器中设置背景图片？我尝试了 css 和 html，理想情况下我希望它能够响应。如果容器变得比图像宽，我正在考虑稍后进行媒体查询以阻止图像拉伸。这是一个好方法吗？或者我应该让图像填充中心列并且它可以受那里的最大宽度限制？

Answer 1

设置列只是为了将它们留空并不是最好的主意。您可以将边距/填充设置为网格的一部分。

当您要求 3 列网格时，您可以查看我附加的代码片段。为了将来参考，“text-align: center;”做的伎俩。当涉及到网格时，我建议您检查 justify-self 和 align-self 属性（mdn 文档）。

我添加了一些填充和边框，让您更容易看到所有内容的结构。你可以摆脱它。

.container {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid red;
  column-gap: 20px;
}

.column {
  border: 1px solid blue;
  text-align: center;
}

.center-column {
  background-color: yellow;
}

<div class="container">
    <div class="column left-column"></div>
    <div class="column center-column">
      <h1 class="title">Some title</h1>
      <div class="slogan">Slogan</div>
      <div class="quote">Some quote</div>
      <div class="artist">Image by <a href="#">Artist</a></div>
    </div>
    <div class="column right-column"></div>
  </div>

Answer 2

我找到了 1 的答案。我最终更改为 5 列布局，然后使用 justify-content 和 text-align 将内容居中。然而，在网格区域设置背景图像仍然是一个挑战。

edit：我找到了 2 的答案，虽然不是很优雅。在 html 中，我不得不将图像标签放在不在 div 内的位置，然后从这里开始按照如何使网格中的内容重叠： 如何将一个 div 覆盖在另一个 div 上 在这里：https://www.youtube.com/watch?v=-qOe8lBAChE&ab_channel=TraversyMedia