将蚂蚁设计旋转木马在屏幕上

发布于 2025-02-06 02:16:41 字数 1293 浏览 2 评论 0 原文

我调整了一个蚂蚁设计旋转木马的大小，想移动图像以出现在屏幕的中央。

这就是图像当前出现的方式

这是我尝试的：

    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>

原文

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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

痴梦一场 2025-02-13 02:16:42

您可以在图像容器上使用 flex 。似乎在运行时，在容器上， display：inline-block 已分配。因此，我们必须使用显示：Flex！重要才能使其工作。

放置 width ＆amp; amp;也很重要。 高度：自动到图像。

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>

我制作了一个带有两个图像的沙箱，中央对齐。

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

<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.