bootstrap 4卡图像水平中心问题

Question

问题：无法水平居中图像：

请参阅此处的代码示例：

.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.index-img-container {
width: 200px;
height: 200px;
}
.index-img {
max-width: 100%;
max-height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<div class="card ">
<div class="card-block m-1">
<a href="" target="_blank" class="nounderline">
<div class="index-img-container d-flex align-items-center justify-content-center">
<img class="index-img" src="https://picsum.photos/536/354">
</div>
<div class="card-body card-body-fix">
<div class="text-secondary font-italic">Title here</div>
<h6 class="card-title text-dark card-title-text">
Some text is shown here with The Lorem Ipsum for photos.
</h6>
<span class="text-space-no-wrap">

<span class="card-text text-danger">Important message</span>
<span class="card-text h5 text-secondary small"></span>
</span>
<br><span class="font-italic text-secondary small">+ Some note</span>
</div>
</a>
<a class="btn btn-info w-100" href="" target="_blank" role="button">View Details</a>
</div>
</div>

如果我删除了css类"索引img容器"；，图像将居中。

.index-img-container {
width: 200px;
height: 200px;
}

我无法理解这个定义大小的类是如何导致图像向左对齐的。但为了保持所有图像的大小相同，不能删除此类。有解决方案吗？

谢谢。

Answer 1

您可以在类中添加自动边距以鼓励居中：

.index-img-container {
width: 200px;
height: 200px;
margin: auto;
}