Centering Image with react / react-bootstrap / flexbox

user_3365886 0
Viewed 10898

I am using versions:

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

I am getting confused a little bit about what is supposed to do what between react, react-bootstrap and flexbox. I have a simple image definition in a file called 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;

I am using it in the App.js file like so:

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

I know that CSS3 and Flexbox offer "justify-content" and "align-items" to position horizontally and vertically respectively, but it isn't clear where I am supposed to use them in the above code or if that is even the best way to center the image given what I have above.

I appreciate any help. Thanks.

flexbox react-bootstrap reactjs javascript
3 Answers

You can use the built in features of react bootstrap and implement something like this:

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

For reference to the docs, you can go here.

user_82872520

Another way to do if outside of flexbox is:

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

I'm using react-bootstrap to center my image both vertically and horizontally.

Following code works for me:

The first m-auto in the Col tag makes the image center vertically, i.e. distances to the top and bottom are equal.

The second mx-auto in the img tag makes the image center horizontally, i.e. distances to the left and right are equal.

d-block in img tag is essential because by default image is displayed as inline 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>
...
user_66485330
Related