CODEWITHSUNDEEP
cssreactjsimage
opposite-people
opposite-people

Reputation: 113

How to center an image in ReactJS using css

I am using ReactJS create-react-app to build a website. I'm trying to center an image on my homepage horizontally across the screen using css, but it is remaining aligned left.

I have the .jpg being imported into a .js file with a class declaration and it appears on the page but it doesn't follow the class modifications I am making in my index.css file.

//in Cur.js file

import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';

function Cur() {

    return (
      <div>
        <Image
          img src={cur} alt="cur" class="center"
          height={350}
          width={700}
        />
      </div>
    );

}

export default Cur;

//in index.css file 

.center{
    text-align: center;
    display: block;
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 100%;
  }

Upvotes: 9

Views: 61805

Answers (8)

Cmcco91
Cmcco91

Reputation: 99

Set a class name for the div eg. className="container-div" And style it in your css style sheet.

.container-div{ 
display: flex;
height: 100vh;
width: 100vw; 
align-items: center;
justify-content: center;
}

The height and width properties will ensure your container covers the whole screen .

Upvotes: 4

Junie
Junie

Reputation: 31

html:

 <div className="image-container">
    <img src={logo} alt="logo"/>
 </div>

css file:

.image-container {
   display: flex;
   justify-content: center;
   align-items: center;
}

Upvotes: 3

Donald Shahini
Donald Shahini

Reputation: 925

In parent div css add:

.parent {
    display: flex;
    justify-content: center;
}

This will center your image.

Upvotes: 1

sumeyyeyeg
sumeyyeyeg

Reputation: 93

import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';

function Cur() {

    return (
      <div>
        <Image src={cur} alt="cur" className="center"/>
      </div>
    );

}

export default Cur;



body,html{
   height:100%,
   min-height:100%
}

.center{
text-align:center;//for texts
height:100%;
display:flex; 
align-items:center;
justify-content:center;
}

Upvotes: 0

Mahdieh Shavandi
Mahdieh Shavandi

Reputation: 8645

my problem was missing display: flex in my css styles. adding it to the rest of styles, solved my problem.

Upvotes: 1

Esteban Krauwezuk
Esteban Krauwezuk

Reputation: 21

React uses className instead of class.

Change

img src={cur} alt="cur" class="center"

to

img src={cur} alt="cur" className="center"

Upvotes: 2

DAMMAK
DAMMAK

Reputation: 179

try this.. the property is called className not class

import React from 'react';
import Image from 'react-image-resizer';
import from "index.css"
import cur from './cur.jpg';

function Cur() {

    return (
      <div>
        <Image
          img src={cur} alt="cur" class="center"
          height={350}
          width={700}
        />
      </div>
    );

}

export default Cur;

Upvotes: 3

nrion
nrion

Reputation: 4984

<Image
    img src={cur} alt="cur"
    height={350}
    width={700}
    style={{ alignSelf: 'center' }}
/>

You may separate the inline style, or use styled-components instead

Upvotes: 6

Related Questions