Как я могу горизонтально центрировать этот div с чувствительным javascript?

Question

на this webpage, если вы прокрутите страницу вниз до первого встроенного изображения, у меня есть пробел перед/после javascript.

Однако обычные функции центрирования, похоже, не работают для меня и в конечном итоге разбивают ползунок. любая помощь была бы оценена.

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

же, как ваши изображения