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

【问题标题】：How to center an image in ReactJS using css如何使用 css 在 ReactJS 中将图像居中
【发布时间】：2019-10-02 00:12:54
【问题描述】：

我正在使用 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%;
  }

【问题讨论】：

标签： css reactjs image

【解决方案1】：

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

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

【讨论】：

当我在 Cur.js 文件中实现它时，它仍然保持左对齐
你应该在父元素中添加flex

【解决方案2】：

为 div 设置一个类名，例如。 className="容器-div" 并在您的 css 样式表中设置样式。

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

高度和宽度属性将确保您的容器覆盖整个屏幕。

【讨论】：

...我不得不更改/更正底部属性的拼写。中心
我明白了，谢谢。

【解决方案3】：

试试这个..该属性称为类名而不是类

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;

【讨论】：

即使有这个变化，它仍然是左对齐的，我的 .css 实现有问题吗？
另外，这不会导致问题，但道具应该只是 src={} 而不是 img src=""

【解决方案4】：

React 使用 className 而不是 class。

改变

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

到

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

【讨论】：

【解决方案5】：

html:

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

css 文件：

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

【讨论】：

图片来自 'react-image-resizer' 库
这对我有用。谢谢@Junie。

【解决方案6】：

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

【讨论】：

【解决方案7】：

在父 div css 中添加：

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

这将使您的图像居中。

【讨论】：

【解决方案8】：

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

【讨论】：