使用 flexbox 居中两个图像

Question

我有这种情况：

<div class="slot_twoimages">
<article class="slot image">
  <img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot image">
  <img src="https://via.placeholder.com/560x441" />
</article>
<article class="slot text">
  <div class="headline">HEADLINE</div>
</article>

采用这种风格：

.slot_twoimages {

  height: auto;
  background-image: linear-gradient(120deg, yellow, pink);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;   
  .slot.image {
    //margin: 121px 40px 64px;
    display: inline-block;
    flex: 50%;
   //DA RIMUOVERE
    img {
        max-width: 560px;
        max-height: 441px;
    }
  }
  .slot.text {
      width: 100%;
      display: block;
      text-align: center;
      margin: 0 30% 88px; 
      margin-bottom: 88px;

      .headline {
          font-size: 29px;
          margin-bottom: 50px;
          letter-spacing: -0.015em;
          padding-top: 24px;
          padding-bottom: 10px;
      }
    } 
}

现在，我想使用 flexbox 将两个图像居中，并且我需要将两个图像下方的插槽文本居中。我需要将图像保持在同一位置，并且有必要进行图像缩放。我无法修改 DOM。

这是我的代码笔：https://codepen.io/andrew_88/pen/rqpxMP

Answer 1

CSS 部分

    .slot_twoimages {
    height: auto;
    background-image: linear-gradient(120deg, yellow, pink);
    display:grid;
    grid-template-columns: 0.5fr 1fr 0.5fr;

  }
  .slot_twoimages .slot.image {

  }
  .slot_twoimages .slot.image img {
    max-height: 441px;
  }
  .slot_twoimages .slot.text {
    width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 88px;
  }
  .slot_twoimages .slot.text .headline {
    font-size: 29px;

  }

  #image1
  {
      grid-column: 2;
  }

  #image2
  {
      grid-column: 2;
  }

  #text1
  {
      grid-column: 2;
      text-align: center
  }

HTML 部分

<div class="slot_twoimages">
    <div id="image1" class="slot image">
      <img src="https://via.placeholder.com/560x441" />
    </div>
    <div id="image2" class="slot image">
      <img src="https://via.placeholder.com/560x441" />
    </div>
    <div id="text1" class="slot text">
      <div class="headline">HEADLINE</div>
    </div >
</div>

结果： https://codepen.io/richardpariath3/pen/oapbRB

请注意，我使用了 CSS 网格