Question 184244 in CSS Question posted in
Some basic documentation can be found here.

Css – Bootstrap 5 Center image

I tried centering an image horizontally my giving the parent div the class justify-content-center as well as text-center.

This worked for any text, however the image remains to the left, rather than centered. How do I fix this?

.thumbnail {
    cursor: pointer;
    height: 10em;
    width: 10em;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
}



.thumbnail > img {
    max-height: 10em;
    max-width: 10em;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="row justify-content-md-center">
  <div class="col col-md-4 d-flex justify-content-center text-center">
    <a href="/characters/pine">
      <div class="thumbnail align-text-bottom text-center">
        <img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
      </div>
      <div>Pineapple Lasagna Coleslaw</div>
    </a>
  </div>
</div>
Tags:

2

Answers


  1. 0

    The image is positioned correctly but the div with the class .thumbnail is positioned to the left of the parent anchor. Just add mx-auto to this div to center it.

    .thumbnail {
    cursor: pointer;
    height: 10em;
    width: 10em;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
}

.thumbnail > img {
    max-height: 10em;
    max-width: 10em;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="row justify-content-md-center">
  <div class="col col-md-4 d-flex justify-content-center text-center">
    <a href="/characters/pine">
      <div class="thumbnail align-text-bottom text-center mx-auto"><!-- added mx-auto to this -->
        <img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
      </div>
      <div>Pineapple Lasagna Coleslaw</div>
    </a>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    That’s because the thumbnail width itself is the exact width of the image, so it’s centered but not as wide as you want it to be. Change the width of the thumbnail to 100% so it inherits the width of its parents and the image will center properly.

    .thumbnail {
    cursor: pointer;
    height: 10em;
    width: 100%;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    box-sizing: content-box;
    outline: 1px solid red;
}



.thumbnail > img {
    max-height: 10em;
    max-width: 10em;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">


<div class="row justify-content-md-center">
  <div class="col col-md-4 d-flex justify-content-center text-center">
    <a href="/characters/pine">
      <div class="thumbnail align-text-bottom text-center">
        <img class="center-block" src="https://media.gettyimages.com/id/157615990/photo/lasagna.jpg?s=612x612&w=gi&k=20&c=ue-VP7TbzbfT-KUHdhUz5T9CPBGteCiTESjiqA8CVHw=">
      </div>
      <div>Pineapple Lasagna Coleslaw</div>
    </a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search