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可以在父级上使用。

希望对您有所帮助；）

在引导卡中居中放置图像

1 个答案: