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

尝试这个..该属性称为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

html：

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

css 文件：

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

Answer 3

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

您可以分隔嵌入式样式，或改用styled-components

Answer 4

React使用 className 而不是 class 。

更改

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

到

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

Answer 5

设置div的类名称，例如className =“ container-div” 并在CSS样式表中为其设置样式。

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

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

Answer 6

我的问题在我的CSS样式中缺少display: flex。将其添加到其余样式中，解决了我的问题。

Answer 7

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

Answer 8

在父div css中添加：

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

这将使您的图像居中。

如何使用CSS在ReactJS中将图片居中

8 个答案: