在屏幕上居中蚂蚁设计轮播答案

【问题标题】：Centering ant design carousel on screen在屏幕上居中蚂蚁设计轮播
【发布时间】：2022-10-17 14:28:27
【问题描述】：

我调整了 ant design carousel 的大小，并希望将图像移动到屏幕中央。

这是图像当前的显示方式

这是我尝试过的：

    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>

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

您可以在图像容器上使用flex。似乎在运行时，在容器上分配了display:inline-block。所以我们必须使用display: flex !important 让它工作。

将width 和height:auto 放入图像也很重要。

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;
}

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

我制作了一个沙盒，其中包含两个不同大小、居中对齐的图像。

【讨论】：

【解决方案2】：

添加这个CSS，它应该可以正常工作

img{
  margin: 0 auto;
}

【讨论】：