How to Center an Image using Bootstrap 5

I attempted to horizontally center an image by applying the class justify-content-center to the parent div, along with text-center.

Although this method worked for text, the image remained aligned to the left instead of being centered. How can I correct this issue?

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55373a3a21262127342515607b657b67">[email protected]</a>/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>

csstwitter-bootstrapbootstrap-5

Answer №1

The reason the thumbnail appears centered but not as wide as desired is because its width matches that of the image itself. To resolve this, adjust the thumbnail width to 100%, allowing it to inherit the width of its parent element and properly center the image.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13717c7c67606761726353263d233d21">[email protected]</a>/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>

Answer №2

The positioning of the image is correct, but the .thumbnail div is currently aligned to the left of the parent anchor element. To center it, simply add mx-auto to the .thumbnail class.

.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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f3919c9c878087819283b3c6ddc3ddc1">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure that the same information is included on every page of

Currently developing a dynamic website where certain components such as the fixed header, menubar, and footer are common across multiple pages. What is the best way to include these fixed components on every webpage? I am utilizing JSP and JavaScript for ...

javascripthtmlcssjsp

Guide on using jQuery to replace the applied css of an aspx control

My dilemma revolves around an AspxFileManager. I am attempting to distinguish a file when it is loaded by adding a class that places a border around the element. My initial attempt using .attr('style', 'border: 10px!important'); was uns ...

jquerycssasp.netcontrolsjquery-events

Employing the "div" element to target in CSS styling

I'm dealing with a document structure that is consistent across multiple pages. HTML: <ul> <li> <div> <img src="" /> </div> </li> </ul> Presently, there is a border aroun ...

htmlcss

Reactstrap's dropdown component with a search input

To enhance the functionality of the reactstrap dropdown, I am interested in using it as a search bar where search results are displayed in the dropdown menu. However, there seems to be an issue with the default key listener that only captures inputs from t ...

reactjsbootstrap-5reactstrapreact-tsx

How come my wrapper box doesn't extend to the full width of the screen when I set it to width: 100%?

Can someone explain why my wrapper box doesn't fill the whole screen when I use width: 100%, but it does when I use width: 100vw? I have set "width=device-width" on my page and the minimum width for the page is 1400px. Thank you all for your assistan ...

css

Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...

csswordpress

Nest two div elements within a parent div with varying margins

When trying to nest two divs inside another div with different margins, the second one always aligns according to the first one. For example, if we have divs named 'first' and 'second', we might want a layout like this: seco ...

htmlcss

Tips for personalizing the appearance of active bootstrap tabs?

I am currently working on creating a website where Bootstrap tabs will display content according to their unique ID when selected. However, I have encountered an issue where the tab selected does not remain active. I am thinking of creating a custom active ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for setting height within a flexbox layout?

Is there a way to specify the height of rows in a flex wrap container so that text containers appear square on both smaller and larger screens? I want the sizing to be dynamic, adjusting as the window is resized. Check out this example on CodeSandbox Loo ...

cssreactjsmaterial-ui

Finding your site's First Contentful Paint (FCP) can be done by analyzing the

After doing some research on Google insights, I came across information about FCP. However, I'm still unsure about how to determine my site's FCP and other relevant metrics. If anyone could provide me with more information or share detailed link ...

javascripthtmlcss

"Implementing a bookmark/watch feature with a hover text cloud using either a Drupal module or CSS styling

Seeking guidance on implementing features in Drupal core. Interested in allowing users to subscribe to various aspects of a node, such as bookmarking for later viewing or rating it. Want a consistent theme across the site and for these features to use togg ...

cssdrupalbutton

Hide the navigation menu when a page link is selected

Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...

cssangularsassnavigation

Is there a method to pre-load a CSS background image so that it can still be displayed even without an internet connection?

Situation: Imagine having a web app that shows an error message when trying to perform an action but fails due to a connectivity problem. The error dialogue has a CSS class with a background image that can't load because of the connection issue, res ...

javascriptcss

Width of a floating division

I have been attempting to adjust the width (or max-width) of a floating div, but so far, none of the options I've tried have been successful. Below is the HTML code I am working with: <div class="tab-content"> <div id = "basicInfo" clas ...

htmlcsscss-float

Using a width of 100% with the display inline-block property does not function as intended

Is there a way to have both a checkbox and text input in one line, with the text input being responsive? I attempted to use display: inline-block, which worked for keeping them in the same line, but I'm having trouble making the text input fill the re ...

htmlcss

HTML input field that shows a hint text when selected

Is there a way to create a text box that shows a hint when clicked on? For example, you can see this feature by clicking on the address text box in the following link: ...

htmlcss

Is it possible for an ul to be displayed beneath a white section within an li

I am working on a JQuery carousel that is displaying correctly, but I want to make a small adjustment to the content: <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" style="float: left; list-style: none ...

javascriptcss

Having difficulty making Skrollr compatible with BootStrap 3 single page wonder

I am completely new to JavaScript, which is why I decided to use Skrollr. However, I have been facing some challenges in getting Skrollr to work properly on my webpage. I added the following code at the end of my page: <script type="text/javascript" sr ...

javascriptcsstwitter-bootstrapskrollr

Tips for equalizing the height of inner DIVs within a container

Similar Question: How to maximize a floating div? Showing my HTML setup below: <div id="container"> <div id="sidebar"> left <br /><br /><br /><br /><br /><br /> ...

htmlcss

Adjust the font size of the Facebook Comments Plugin

Does anyone know how to adjust the font size within a Facebook Comment iframe? I attempted to utilize a jquery script with the append method in hopes of injecting my CSS file into the iframe, but unfortunately it did not yield any result. Is modifying the ...

cssiframefacebook-social-plugins