时间戳

首页 > 解决方案 > 在引导程序中使用 mx-auto 时，Img 标签未以 col 为中心

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

问题描述

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

figma 的最终输出

这里添加codepen链接

.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

标签： javascripthtmlcssbootstrap-4

解决方案

自 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>

在你的代码中试试这个

还可以参考另一个答案：如何在引导列中居中内容？

推荐阅读