'need help centering bootstrap carousel image

I am having trouble making the image centered in the slider.

Please see my carousel here https://wordpress-website-headless-v2-c9jivybjd.vercel.app/

it is created using react-bootstrap with next.js

for centering image I've tried adding to image tag

.center-block 
margin: 0 auto

to both image and carousel-item

cssbootstrap-4react-bootstrap


Solution 1:[1]

Possible Solution

To center inline HTML elements, add text-align property to center to it's parent block element.

Below CSS rule will centre the images in the slider.

.carousel-item {
    text-align: center;
}

Solution 2:[2]

.center-block {
position: absolute;
top: 50%;
left: 50%;

}

// You can center your carousel image with vanilla CSS like me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kantbtrue
Solution 2 Jewel Nabin

Related Questions