我在将一对分层图像居中时遇到问题(在悬停时切换同一图像的前后)。为了将它们叠加在一起,我分别给了它们绝对类和相对类,现在我似乎无法让它们在页面流中居中,尽管对绝对元素使用了通常的居中技术。我试过文本对齐、对齐内容、调整边距等都无济于事。
有什么想法吗?
#GalleryThumbnails {
padding-bottom: 10em;
}
#crossfade {
position:relative;
height:281px;
}
#crossfade img {
position:absolute;
cursor: pointer;
border-radius: 10px;
transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;
}
#crossfade img.top:hover {
opacity:0;
}
<div id="GalleryThumbnails">
<div class='Thumbnail'>
<div id="crossfade">
<img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
<img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
</div>
</div>
<div class='Thumbnail'>
<div id="crossfade">
<img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
<img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
</div>
</div>
最佳答案
你可以使用 display: flex;
#GalleryThumbnails {
padding-bottom: 10em;
}
#crossfade {
position:relative;
height:281px;
display: flex;
align-items: center;
text-align: center;
margin: auto;
width: max-content;
}
#crossfade img {
cursor: pointer;
border-radius: 10px;
transition: opacity .25s ease-in;
-webkit-transition: opacity .25s ease-in;
-moz-transition: opacity .25s ease-in;
-o-transition: opacity .25s ease-in;
}
#crossfade img:last-child{
position: absolute;
}
#crossfade img.top:hover {
opacity:0;
}
<div id="GalleryThumbnails">
<div class='Thumbnail'>
<div id="crossfade">
<img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Hannah Before Thumbnail Image' width='300'/>
<img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Hannah After Thumbnail Image' width='300'/>
</div>
</div>
<div class='Thumbnail'>
<div id="crossfade">
<img class="bottom" src="https://static.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" alt='Stephen Before Thumbnail Image' width='300'/>
<img class="top" src="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg" alt='Stephen After Thumbnail Image' width='300'/>
</div>
</div>
关于html - 无法将分层图像居中,有什么想法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48287554/