我正在使用 css、html 和 bootstrap 为 Web 开发课程做作业。我需要创建一个网站，但我在布局方面遇到了一些问题，我在容器和行 div 中使用引导卡（带图像），但行中的 3 张卡未在 col 的中心对齐，有如您在此屏幕截图中所见，col 右侧还留有一些空间。
这是我的代码：
<div class="container">
<div class="row ">
<div class="col-4">
<div class="card text-center " style="width: 18rem;">
<img src="imgs\products\cameras\1.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Canon EOS Rebel T7</h5>
<p class="card-text">Price : Rs. 37000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Fujifilm X-T3</h5>
<p class="card-text">Price : Rs. 34000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-center" style="width: 18rem;">
<img src="imgs\products\cameras\3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nikon D5600</h5>
<p class="card-text">Price : Rs. 43000.00</p>
<a href="#" class="btn btn-primary btn-block">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
我想知道是否有任何方法可以使用 css 或 bootstrap 将卡在 col div 中居中对齐？
我还想知道如何使所有卡片的大小（宽度和高度）相同，即使它们内部的图像大小不同，正如您在屏幕截图中看到的，由于图像大小不同，最后两张卡片的大小不同.
对于你的第一个问题：
只需col-4 d-flex justify-content-center在您的 col 定义上使用。通过这样做，卡片应该在上列的中间对齐，请参见此处。蓝色 = 容器，紫色 = 列，绿色 = 卡片。
希望这对你有用！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句