Centering ant design carousel on screen

Question

I resized an ant design carousel and would like to move the image to appear on the center of my screen.

This is how the image currently appears

This is what I have tried:

    const contentStyle = {
          height: '160px',
          width: '25%',
          color: '#fff',
          lineHeight: '60%',
          textAlign: 'center',
          background: '#364d79',
          justifyContent: 'center',
          alignItems: 'center',
    };

    const imageStyle = {
        flex: 1,
        width: '100%',
        height: '100%',
        resizeMode: 'center',
    }
    return(
    <>
        <Carousel autoplay>
                {
                    [onlineUsers].length === 0 ?
                        <p>There are currently no active users</p>
                        : onlineUsers.map(user => {
                            return (
                            <div className="img-container">
                                <h3 style={contentStyle}><img style={imageStyle} src={user.profile_pic} /></h3>
                            </div>
                            )
                        })
                }
      </Carousel>

Answer 1

You can use flex on the image container. It seems at runtime, on the container, display:inline-block is assigned. So we have to use display: flex !important for it to work.

It's also important to put a width & height:auto to image.

CSS

.container {
  display: flex !important;
  justify-content: center;
  background-color: hotpink;
  align-content: center;
}

.container > img {
  width: 80px;
  height: auto;
}

.carousal {
  background-color: brown;
  padding-bottom: 50px;
}

JS

<Carousel className="carousal">
  <div className="container">
    <img src={user} alt="xx" />
  </div>
  <div className="container">
    <img src={programmer} alt="xx" />
  </div>
</Carousel>

I have made a sandbox with two images, different sizes, center aligned.