Center image inside div element in bootstrap

Question

I use bootstrap and I would like to know why when I apply max-width to an image, it does not consider text-center and is decentralized. Just remove the max-width to make it centered again.

<div class="img-rsa g-4 align-self-center text-center">

  <img src="img/aluno-rsa.jpg" alt="" class="img-fluid" style="border-radius:100%">

</div>

.img-rsa {
    width: 100%;
    max-width: 350px;
    display: block;
}

You are applying your width settings to the div container. Not to the image. — jons, Aug 19 '21 at 19:10
Agree with @Jons, so your image is getting centered in that div having width 350px. — Ashish Jain, Aug 19 '21 at 19:24

score 0 · Answer 1 · answered Aug 19 '21 at 19:12

You would need to apply your width settings to the image.

.img-fluid {
  width: 100%;
  max-width: 350px;
  height: auto: // You need to add this
  display: block;
}

Then since the image is block now, you can use margin auto to center it. Or you can keep the image inline and center it with text-align.

score 0 · Answer 2 · answered Aug 19 '21 at 19:31

Use the class mx-auto on the image to horizontally center it. Run this example based on your specific case:

.img-rsa {
    width: 100%;
    max-width: 350px;
    display: block;
    border: solid 1px black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap-grid.min.css">

<div class="img-rsa g-4 d-flex align-self-center">
  <img src="https://picsum.photos/200" alt="" class="img-fluid mx-auto" style="border-radius: 100%">
</div>

Center image inside div element in bootstrap

2 Answers2