javascript - 我怎样才能水平居中这个包含敏感 javascript 的 div？

Question

关于 this webpage如果您向下滚动到第一个内联图像，我会在 javascript slider 发生之前/之后发生。

但是，正常的居中选项似乎对我不起作用并且最终破坏了 slider 。任何帮助将不胜感激。

HTML:

<div class="before_after_slider">
    <div class="photo">
    <div class="after">
    <img src="center_before.jpg" width="1000px" height="600px"  alt="after" />
    </div>
    <div class="before">
    <img src="center_after.jpg" width="1000px" height="600px" alt="before" />
    </div>
    </div>
    </div>
    <div class="caption">
    <p>Roll over the photo with your cursor to see the before/after images. </p>
  </div>

CSS:

.before_after_slider {
    position: relative;
    padding-bottom: 10px;
    width: 55%;
    margin: 0 auto;
  & > * {
    position: relative;
  }
}

.after {
  overflow: hidden;
  position: absolute;
  top: 0px;
  width:1000px;
  height:600px;
}

.caption {
    font-family: helvetica;
    font-weight: 100;
    line-height: 140%;
    letter-spacing: 0px;
    font-size: 13px;
    width: 55%;
    margin: 0 auto;
    padding-top: 0px;
    padding-bottom: 30px;
}

Answer 1

这有很多问题。就像外部容器的宽度小于内部元素一样。 但现在您可以试试这个。

.before_after_slider{
width:1000px;
}

和你的图片一样