[英]Centering ant design carousel on screen
I resized an ant design carousel and would like to move the image to appear on the center of my screen.我调整了 ant design carousel 的大小,并希望将图像移动到屏幕中央。
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>
You can use flex
on the image container.您可以在图像容器上使用
flex
。 It seems at runtime, on the container, display:inline-block
is assigned.似乎在运行时,在容器上分配了
display:inline-block
。 So we have to use display: flex !important
for it to work.所以我们必须使用
display: flex !important
才能工作。
It's also important to put a width
& height:auto
to image.将
width
和height:auto
添加到图像也很重要。
CSS 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 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.我制作了一个沙盒,其中包含两个不同大小、居中对齐的图像。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.