在引导程序中使用 mx-auto 时，Img 标签未以 col 为中心答案

【问题标题】：Img tag is not centering for col with mx-auto in bootstrap在引导程序中使用 mx-auto 时，Img 标签未以 col 为中心
【发布时间】：2021-05-18 16:39:58
【问题描述】：

我正在尝试添加包含两列的行，一列是 col-7，另一列是 col-5。在 col-am 添加一个表单，因为我对 col-7 有问题，在该表单中我尝试使用图像标签添加 png。我希望图像在 col-5 内垂直和水平居中，我正在尝试使用 mx-auto 和 my-auto 但没有用。

Here am adding codepen link

.rect {  
  background-color: red;
}

.container {
  border: 5px solid #000;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">


<div class="container">
<div class="row">
<div class="col-7 mx-auto"><img src="https://i.ibb.co/LC6Wchz/cover-image.png" class="" alt=""></div>
<div class="col-5 rect"></div></div></div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

neramclasses.com

【问题讨论】：

标签： javascript html css bootstrap-4

【解决方案1】：

自 Bootstrap 4.5 和 5.0 起，您始终可以在 bootstrap 中使用 flex

<div class="col-7 d-flex justify-content-center"><img src="https://i.ibb.co/LC6Wchz/cover-image.png" class="" alt=""></div>

在你的代码中试试这个

另供参考另一个答案：How to center content in a bootstrap column?

【讨论】：

你能告诉我如何在 col 中垂直居中吗？还有为什么 mx-auto 不工作？
因为我们使用 justify-content-center 水平对齐，您可以使用 align-content-center 垂直对齐