bootstrap 4 card image horizontal center problem

Question

Problem: unable to horizontally center the image:

Please see the code example here:

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

If I removed the css class "index-img-container", the image will be centered.

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

I am unable to understand how this size-defining class can cause the image to align to left. But in order to keep all images the same size this class cannot be removed. Is there a solution?

Thanks.

Answer 1

You could add auto margin to your class to encourage centering:

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