CODEWITHSUNDEEP
javascriptreactjsflexboxreact-bootstrap
Garet Jax
Garet Jax

Reputation: 1171

Centering Image with react / react-bootstrap / flexbox

I am using versions:

[email protected]
[email protected]

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.

Upvotes: 6

Views: 14945

Answers (3)

fishstick
fishstick

Reputation: 2274

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>
...

Upvotes: 1

Garet Jax
Garet Jax

Reputation: 1171

Another way to do if outside of flexbox is:

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

Upvotes: 1

scinatl
scinatl

Reputation: 94

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.

Upvotes: 7

Related Questions