Выравнивание по вертикали и центрирование нескольких делений с помощью Flexbox

Question

Я пытаюсь выровнять по вертикали два набора строк, каждая из которых содержит изображение с одной стороны и текст с другой стороны.Хотя у меня есть опыт использования flex для выравнивания по вертикали с использованием приведенного ниже кода, похоже, что в данной конкретной ситуации мне нужно использовать что-то другое:

  justify-content: center;
  flex-direction: column;
  text-align: center;

Это то, чего я пытаюсь достичь (обратите внимание, чтокрасная рамка - это изображение, а серая рамка - это текст):

Тем не менее, я получаю ситуацию ниже, с текстом не по центруно сверху выровнено с изображением:

Так выглядит структура DOM (ReactJS):

<LandingPinkDiv>
  <Grid container spacing={24}>
    <Grid item xs={12}>
      <LandingTitleWhite>Title</LandingTitleWhite>
    </Grid>
    <LandingRowDiv>
      <Grid item xs={6}>
        <LandingImageDiv>
          <LandingImage
            src={1}
            width="320px"
            height="304px"
          />
        </LandingImageDiv>
      </Grid>
      <Grid item xs={6}>
        <LandingTextContainer>
          <LandingSubheadingWhite>
            Subheading
          </LandingSubheadingWhite>
          <LandingSubtitleBlack>
            SubTitle
          </LandingSubtitleBlack>
        </LandingTextContainer>
      </Grid>
    </LandingRowDiv>

    <LandingRowDiv>
      <Grid item xs={6}>
        <LandingTextContainer>
          <LandingSubheadingWhite>
            SubHeading
          </LandingSubheadingWhite>
          <LandingSubtitleBlack>
            Subtitle
          </LandingSubtitleBlack>
        </LandingTextContainer>
      </Grid>
      <Grid item xs={6}>
        <LandingImageDiv>
          <LandingImage
            src={2}
            width="320px"
            height="197px"
          />
        </LandingImageDiv>
      </Grid>
    </LandingRowDiv>
  </Grid>
</LandingPinkDiv>

CSS аналог выглядит так:

export const LandingRowDiv = styled.div`
  display: flex;
  /* justify-content: center;
  flex-direction: column;
  text-align: center; */
  margin-bottom: 10%;
  padding-left: 10%;
  padding-right: 10%;
`;

export const LandingPinkDiv = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 170vh;
  background: #e72564 !important;
`;


export const LandingTextContainer = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  margin-right: 10%;
`;

Answer 1

Вам необходимо добавить align-items: center к вашему LandingRowDiv стилизованному компоненту:

export const LandingRowDiv = styled.div`
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: row;
  text-align: center
  margin-bottom: 10%;
  padding-left: 10%;
  padding-right: 10%;
`;

Answer 2

Не уверен, что я правильно понял, но вы могли бы рассмотреть следующий html

<figure>
    <img src="" alt="">
    <figcaption>
        <p>Text</p>
    </figcaption>
</figure>

И затем следующий css

figure {
    display: flex;
    width: 100%;
}

figure img {
    width: 50%;
}

figure figcaption {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

(вы можете использовать align-self на p вместо pвыравнивать-элементы)

Answer 3

Вы должны использовать align-items: center; в стилевом компоненте 'LandingRowDiv'.