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，但仍然拒绝。我在哪里错了？关于如何实现我所描述的任何建议。

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

Answer 1

您可能需要放

vapply(1:ncol(df), function (n) normFunc(df[,n]), numeric(nrow(df)))

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

Answer 2

<StyledWrapper>中的

。

justify-content: center;以在x轴上居中，并且

align-items: center;居中。

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

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

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

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

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

flex-shrink（缩小的宽度将如何影响定义的元素）

flex-wrap（被迫放在一行上或可以换行以用于子代fleboxes的父类）

使用flexbox垂直对齐内容

2 个答案: