使用flexbox垂直对齐内容

Question

我正在创建一个图块，其中图像可以是图块的50％或图块的75％，内容将填充剩余的剩余区域/空间。 我的问题是我不想为图像设置特定的高度，因为它将失去图像的高宽比。 我有以下类似的东西：

const tile= () => (
  <StyledWrapper>
    <StyledImageBlock>
      //get Image here
    </StyledImageBlock>
      <StyledTextContent>
        {getTitleOne()} //this is a span element
        {getTitleTwo()} //this is a span element
      </StyledTextContent>}
  </StyledWrapper>
);

在我的StyledWrapper我具有以下内容：

  text-align: center;

  a {
    text-decoration: none;
  }

在我的StyledImageBlock我具有以下内容：

  width: 100%;

在我的StyledTextContent我具有以下内容：

align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

但是项目拒绝垂直对齐，我在StyledWrapper height: 700px设置为height: 700px仅用于演示，但仍然拒绝。 我在哪里错了？ 关于如何实现我所描述的任何建议。

一些更多的信息。 在图像和内容上设置百分比高度时，我可以达到所需的结果，但与此同时，图像的宽高比会变差/拉伸我不需要的图像。 最终，该图块将进入flexbox网格。

Answer 1

您可能需要放

justify-content: center;
align-items: center;

在StyledWrapper上 。 这将使StyledImageBlock垂直和水平居中 。

Answer 2

在<StyledWrapper>设置中。

justify-content: center; 以x轴为中心，并且，

align-items: center; 居中。

定义display: flex时的父元素display: flex是一个框，您可以在其中设置子元素的交互方式。

flex-basis （设置第一个元素的宽度，影响定义的元素）

flex-direction （设置元素显示方式的方向，用于子级fleboxes的父类中）

flex-grow （元素在x轴上的宽度如何影响定义元素的位置）

flex-flow （如何在x轴上显示子项，以在子项fleboxes的父类中使用）

flex-shrink （ 收缩的宽度将如何变化，影响定义的元素）

flex-wrap （强制到一行或可以换行，以用于子级fleboxes的父类中）