如何使用 Bootstrap（和 React）使图像居中答案

【问题标题】：How center an image with Bootstrap (and React)如何使用 Bootstrap（和 React）使图像居中
【发布时间】：2020-01-17 06:15:50
【问题描述】：

我在使用 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

【问题讨论】：

一切看起来都不错，请参阅 stackblitz：stackblitz.com/edit/react-chvfbq

标签： html css reactjs bootstrap-4

【解决方案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

【讨论】：