使用 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 将图像垂直和水平居中。

以下代码对我有用：

Col 标签中的第一个m-auto 使图像垂直居中，即到顶部和底部的距离相等。

img 标签中的第二个mx-auto 使图像水平居中，即左右距离相等。

img 标签中的d-block 是必不可少的，因为默认情况下图像显示为内联块。

import mysvg from "./images/mysvg.svg";
...
<Col sm={2} className="m-auto">
  <img
    className="d-block mx-auto img-fluid w-50"
    src={mysvg}
    alt="mysvg"
  ></img>
</Col>
...

Answer 2

如果在 flexbox 之外，另一种方法是：

<Image width="125" className="rounded mx-auto d-block" src="/staff_login.jpg" />

Answer 3

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

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

如需参考文档，您可以前往here。