如何在网格中居中图像和文本？

Question

我还是菜鸟，正在努力学习HTML和CSS。我正在尝试将 1fr 1fr 网格用于我的“欢迎”部分。想法是在左侧放置图像，在右侧放置文本。当我转到 Inspect 并尝试在响应模式下查看它时，当宽度低于 1300 或高度低于 900 时，我的网格会崩溃。

这是我在header之后的第一节，所以我的问题是我应该如何处理这种情况？我不想像这样构建整个页面，然后意识到我需要数百行媒体查询，因为我从一开始就使用了错误的概念:)

我想得到这样的东西：Example

下面是我的代码：

.welcome {
  padding: 7em 0;
  display: flex;
  justify-content: center;
}

.welcome-container {
  display: grid;
  justify-content: center;
  align-content: stretch;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
  background-color: white;
  height: 50vh;
  width: 50vw;
  overflow: hidden;
}

.welcome-left {
  padding: 3em;
  border: 1px blue solid;
  text-align: center;
}

.welcome-img {
  background-image: url(../../img/tetiana-padurets-B-xb7VFtlZg-unsplash.jpg);
  width: 100%;
  height: 100%;
}

.img {
  display: block;
}

.welcome-right {
  border: 1px red solid;
  padding: 5em 3em;
}

.welcome-title {
  text-align: center;
  color: #3f3f3f;
  font-weight: 400;
  margin-top: 1em;
}

<section class="welcome">
    <div class="welcome-container">
      <div class="welcome-left">
        <div class="welcome-img"></div>
      </div>
      <div class="welcome-right">
        <h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
        <p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores. 
        </p>
      </div>
    </div>
  </section>

干杯！

Answer 1

<section class="welcome">
    <div class="welcome-container">
      <div class="welcome-left">
        <div class="welcome-img">
            <img class="image" src="https://i.picsum.photos/id/237/200/300.jpg?hmac=TmmQSbShHz9CdQm0NkEjx1Dyh_Y984R9LpNrpvH2D_U">
        </div>
      </div>
      <div class="welcome-right">
        <h2 class="welcome-title"><span>Lorem Ipsum!</h2></span>
        <p class="welcome-desc">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint dolor voluptas quo id maiores distinctio quidem, voluptatum voluptates dolorem eum eius vitae. Doloremque maiores, inventore vel error perferendis necessitatibus quae debitis cumque ipsa explicabo facere soluta vero asperiores, voluptates reprehenderit labore accusantium dolores. 
        </p>
      </div>
    </div>
  </section>

在CSS

.welcome {
  display: flex;
  justify-content: center;
  width: 100%;
}

.welcome-container {
  display: grid;
  justify-content: center;
  align-content: stretch;
  grid-template-columns: 1fr 1fr;
  background-color: white;
  width: 50vw;
}

.welcome-left {
  padding: 10px;
  border: 1px blue solid;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: 100%;
  height: auto;
}

.img {
  display: block;
}

.welcome-right {
  border: 1px red solid;
  padding: 10px;
}

.welcome-title {
  text-align: center;
  color: #3f3f3f;
  font-weight: 400;
  font-size: 2vw;
  margin-top: 1em;
}

.welcome-desc {
  font-size: 1vw;
}

.welcome-img {
  width: 100%;
}

我猜你想要这样的东西。

如何在网格中居中图像和文本？

How can I center image and text in grid?

html

css

css-grid