javascript - 使用 react/react-bootstrap/flexbox 居中图像

Question

我正在使用版本:

react@16.8.6
react-bootstrap@1.0.0-beta.8

我对 React、React-bootstrap 和 Flexbox 之间应该做什么感到有点困惑。我在名为 LoginImage.js 的文件中有一个简单的图像定义:

import React, { Component } from 'react'
import { Image } from "react-bootstrap";

class LoginImage extends Component {
  render() {
    return (
      <Image width="150" src="/staff_login.jpg" />
    );
  }
}

export default LoginImage;

我像这样在 App.js 文件中使用它:

import LoginImage from './LoginImage'
...
    <Container>
      <Row>
        <Col xs={12} sm={4} md={4}>
          <LoginImage />
        </Col>
      </Row>
    </Container>

我知道 CSS3 和 Flexbox 提供了“justify-content”和“align-items”来分别水平和垂直定位，但不清楚我应该在上面的代码中的什么地方使用它们，或者它是否均匀根据我上面的内容，将图像居中的最佳方法。

我很感激任何帮助。谢谢。

Answer 1

您可以使用 react bootstrap 的内置功能并实现如下内容:

<Row className="justify-content-md-center">
    <Col xs={12} sm={4} md={4}>
        <LoginImage />
    </Col>
</Row>`enter code here`

引用文档，你可以去here .