Carousel images not horizontally centered when they're narrower than the carousel

[cvrebert]

Refs #18140 (comment)

When a slide image is narrower than the carousel itself, it becomes left-aligned instead of centered.

[bassjobsen]

I do not think this is an issue. The carousel requires only images having the same dimensions and the .carousel should never be wider than these images. We can add this to the docs.

When on of the images is smaller, center it only helps when the height is the same for all images. To center it you have to add the center-block class to the img element in your HTML, according the refactoring #18161; for instance <img class="carousel-item-img img-fluid center-block" src="">

when you have to add images with different dimensions you will have to change your images. Put the smaller images on a white or transparent background having the same dimension as your largest image with a image editor.

[mdo]

Not going to do anything about this on our end. Closing as a won't fix.

[asifalmani]

I tried this and its working fine for me.

.carousel-inner {
	.item {
		&.active {
			img {
				max-height: 650px;
  				margin: auto;
			}
		}
	}
}