html - 如何使用 Bootstrap(和 React)居中图像

Question

我对 Bootstrap 有疑问。 我想将图像居中，但使用以下代码，图像是左对齐的:

HTML:

<div className="App vh-100">
  <div className="d-flex h-70 border border-white container">
    <div class="py-5">
      <div className="text-center">
        <img src={logo} className="esc-logo slide-top center-block" alt="logo" />
      </div>
    </div>
  </div>
  <div class="container h-auto">
     <h1>test</h1>
  </div>
</div>

还有 CSS:

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

}

.esc-logo {
  height: 40vmin;
}

怎么了？有人可以帮助我吗？

感谢您的帮助， 拥抱0

Answer 1

图像居中。主要问题是类 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>
  );
}

现场观看here