css - 如何使用 css 在 ReactJS 中将图像居中

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%;
  }

标签： cssreactjsimage

Answer 1

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

您可以将内联样式分开，或styled-components改用