Html 如何使用引导将图像居中（并作出反应）

我对引导有问题。 我想将图像居中，但使用以下代码，图像是左对齐的：

HTML:

怎么了？有人能帮我吗

谢谢你的帮助，

---

hug0

图像居中。主要问题是类为

py-5

的DIV不是全宽的，因此图像没有居中的空间

作为一个快速测试，我将

style={{{width:“100%”}

添加到类为

py-5

的DIV中，图像居中

例如：

import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
import "./styles.css";

export default function App() {
  return (
    <div className="App vh-100">
      <div className="d-flex h-70 border border-white container">
        <div className="py-5" style={{width: "100%"}}>
          <div className="text-center">
            <img
              src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16fb061b0aa%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16fb061b0aa%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              className="esc-logo slide-top center-block" alt="logo"
            />
          </div>
        </div>
      </div>
      <div class="container h-auto">
        <h1>test</h1>
      </div>
    </div>
  );
}

从“React”导入React；
导入'bootstrap/dist/css/bootstrap.css'；
导入“/styles.css”；
导出默认函数App（）{
返回(
测试
);
}

---

现场观看

一切看起来都很好，请参见stackblitz：

.App {
text-align: center;
background-color: #1e0933;
background-image: url(url);
background-attachment: fixed;
background-size: cover;

}

.esc-logo {
  height: 40vmin;
}

import React from "react";
import 'bootstrap/dist/css/bootstrap.css';
import "./styles.css";

export default function App() {
  return (
    <div className="App vh-100">
      <div className="d-flex h-70 border border-white container">
        <div className="py-5" style={{width: "100%"}}>
          <div className="text-center">
            <img
              src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_16fb061b0aa%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_16fb061b0aa%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.421875%22%20y%3D%22104.65%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
              className="esc-logo slide-top center-block" alt="logo"
            />
          </div>
        </div>
      </div>
      <div class="container h-auto">
        <h1>test</h1>
      </div>
    </div>
  );
}