在引导卡中居中图像[重复]

Question

我在引导卡中将图像居中时遇到问题。

之前有人问过类似的问题 (How do I center a Bootstrap Card Image) 但被删除为一个认为它是重复的mod。但是，为类似问题提供的答案不适用于引导卡。在 img 标签中尝试各种中心类似乎不起作用。

我的代码： HTML：

    <div class="card text-center h-100">
    <img class="card-img-top smallimg" src="IMG/magnifyingGlass.png" alt="Card image cap">
    <div class="card-block catCard">
      <h4 class="card-title">Some text</h4>
      <p class="card-text">Some Text</p>
    </div>
                <div class="card-footer">
        <small class="text-muted">Some Text</small>
    </div>
  </div>

CSS 代码：

.card-footer{
position:absolute;
  bottom:0;
  width:100%;
}

.smallimg {
    width: 150px; 
    height: 150px;
}

.catCard{
    margin-bottom: 50px; /* height of the footer or more */
}

Answer 1

在 Bootstrap 4 中，mx-auto 类（自动 x 轴边距）可用于将 display:block 的图像居中。但是，img 默认为display:inline，因此text-center 可以在父级上使用。