Как центрировать изображение в ReactJS с помощью CSS

Question

Я использую ReactJS create-Reaction-app для создания веб-сайта. Я пытаюсь центрировать изображение на моей домашней странице по горизонтали по экрану с помощью css, но оно остается выровненным по левому краю.

У меня .jpg, импортируемый в файл .js с объявлением класса, и он появляется на странице, но не соответствует изменениям класса, которые я делаю в моем файле index.css.

// в файле Cur.js

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;

// в файле index.css

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

Answer 1

попробуйте это .. свойство называется className, а не 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;

Answer 2

Установить имя класса для div, например.className = "container-div" И введите его в свою таблицу стилей CSS.

.container-div{ 
Display: flex;
Height: 100vh;
Width: 100vw; 
Align-Items: center;
Justify-Content: centre;
}

Свойства высоты и ширины обеспечат, что ваш контейнер будет покрывать весь экран.

Answer 3

React использует className вместо class .

Изменение

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

до

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

Answer 4

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

Вы можете отделить встроенный стиль или использовать styled-components вместо