在轨道插件内对齐标题div - zurb基础

Question

我正在尝试使用轨道（zurb基础框架）进行响应式布局，并且我想在动态内容的图片上方添​​加div。 我最大的问题是，当浏览器调整大小时，矩形div会脱离图片。 有什么想法吗？

这是一个小提琴： http://jsfiddle.net/Bonomi/Tw53e/

这是代码：

<div class="row">
    <div class="large-12">
        <ul data-orbit>
            <li>
                <img src="http://www.tamurilart.com/art-gallery/fractals/800x600/birth-of-a-galaxy-800x600.jpg" alt="slide 1">
                <div class="orbit-caption">
                Caption 1
                </div>
            </li>
        </ul>
        <div class="orbit-caption">
        </div>
    </div>
</div>

.orbit-container ul li img {
    margin: 0 auto;
}

.orbit-next, .orbit-prev {
    background-color: rgba(0, 0, 0, 0.3);
}

.custom-caption {
    display: block;
    background: grey;
    position: absolute;
    width: 600px;
    height: 60px;
    top: 100px;
    margin: 0 auto;
}