Question

我有一个问题集中在一对分层图像上（在开启悬停的同一图像的拍摄之前和之后）。为了将它们叠加在一起，我分别给了它们绝对和相对的类，现在我似乎不能让它们在页面流中居中，尽管使用通常的居中技术来获取绝对元素。我尝试过文字对齐，对齐内容，调整边距等无济于事。

有什么想法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以使用display: flex;

执行此操作

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您的#crossfade div应该有display: table;，并且您的一张图片应该是position:relative;

请参阅下面的代码段

＆＃13;

#GalleryThumbnails {
padding-bottom: 10em;
}


#crossfade {
position:relative;
margin: 0 auto;
display: table;
}

#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;
}
.bottom{
  position: relative !important;
}
.top{
  left: 0;
}

＆＃13;

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

＆＃13;

难以集中分层图像，任何想法？

2 个答案: