Центрирование изображения с помощью реакции / реакции-начальной загрузки / flexbox

Question

Я использую версии:

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

Я немного запутался по поводу того, что предполагается делать между реакцией, реакцией-бутстрапом и флексбоксом. У меня есть простое определение изображения в файле с именем 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

Вы можете использовать встроенные функции реакции начальной загрузки и реализовать что-то вроде этого:

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

Для ссылки на документы, вы можете перейти здесь .

Answer 2

Другой способ сделать, если снаружи flexbox это:

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