react-bootstrap align-middle 不适用于列

Question

根据 bootstrap documentation，我应该能够使用 align-middle class 垂直对齐列内的内容。我用打字稿写了这段代码，react-bootstrap 和 align-middle 对我不起作用。

    const Style = styled.div<StyledProps>`
      .fixed {
        background-image: url(${props => props.image? props.image : '../img/matrix.jpg'});
        background-repeat: none;
        background-attachment: fixed;
        background-size: cover;
        min-height: 400px;
      }
    `;
    
    export const FixedBackground = () => {return (
      <Style image={matrix}>
        <Container>
          <Row className="text-light py-5 align-items-center align-middle align-items-center">
            <Col className="col col-lg-12 col-md-12 text-center fixed align-middle align-items-center">
              <h1 className="align-middle">Advance to the next level</h1>
            </Col>
          </Row>
        </Container>
      </Style>
    )};

我希望 h1 标记位于图像的垂直中心...但它出现在顶部。我也用谷歌搜索并找到了这个但添加 align-items-center 的建议对我不起作用。

Answer 1

将 class d-flex 与您的 Col 相加，使其成为 display:flex。您可以使用 class justify-content-centre 将您的内容水平居中。使用 class align-items-center 将您的内容垂直居中。

react-bootstrap align-middle 不适用于列

react-bootstrap align-middle not working for Columns

typescript

react-bootstrap