如何在ReactJS中使用css居中显示图像

Question

我正在使用ReactJS create-react-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

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

您可以分隔内联样式，或者改用styled-components

Answer 2

试试这个..。该属性称为className，而不是类

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 3

为div设置一个类名。className="container-div“并在css样式表中设置样式。

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

height和width属性将确保容器覆盖整个屏幕。