Javascript 如何使滑块控件保持在相同的位置

我的网站上有多张幻灯片，每个幻灯片都有不同的文本。问题是，当文本较长时，控件会上下浮动。。。。。请看这里。我怎样才能让我的控件停留在中间图片的中心？

谢谢，非常感谢

另外，如果你在我的问题中看到一个没有很好解释的东西或任何东西，请告诉我，以便下次我能提出一个更好的问题：）

代码：

• 编辑-1 在CSS中，owl prev和owl next是控件。Javascript插件可以实现这一点

---

这是因为控件的定位使用百分比：

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 18%; // <--- this one
    opacity: 0.5;
}

---

在插件解析DOM并更改标记后，如果不知道标记是什么样子，很难说是否有其他方法相对于

img

或旋转木马定位这些标记，允许一个百分比宽度使它们在中间很好地坐在一起，不管<代码> IMG < /代码>或旋转木马图像高度。< /P>没有问题，乐意帮助。

/*
*   Owl Carousel Owl Demo Theme 
*   v1.22
*/

.owl-theme .owl-controls{
    margin-top: 0;
    text-align: center;
}

/* Styling Next and Prev buttons */

.owl-theme .owl-controls .owl-buttons div{
    color: #FFF;
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin: 5px;
    padding: 0 12px;
    font-size: 12px;
    opacity: 0.9;
    color: #fff;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controls.clickable .owl-buttons div:hover{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
    text-decoration: none;
}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-page{
    display: inline-block;
    zoom: 1;
    *display: inline;/*IE7 life-saver */
    margin-top: 10px;
}
.owl-theme .owl-controls .owl-page span{ /* es este pilas*/
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #ccc;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span{
    filter: Alpha(Opacity=100);/*IE7 fix*/
    opacity: 1;
}

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{
    height: auto;
    width: auto;
    color: #FFF;
    padding: 2px 10px;
    font-size: 12px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
}

/* preloading images */

.owl-item.loading{
    min-height: 190px;
    background: url(AjaxLoader.gif) no-repeat center center
}


/* Styling Next and Prev buttons  Titles -----------------------------*/

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 18%;
    opacity: 0.5;
}
.single-carousel:hover .owl-prev,
.single-carousel:hover .owl-next{
    opacity: 1;
}
.single-carousel .owl-prev{
    left: -5px;
}
.single-carousel  .owl-next{
    right:-5px;
}

.owl-controls{
    margin: 0;
}
.twitter .owl-theme .owl-controls{
    margin-top: 20px;
}
#blog-post  .owl-prev,
#blog-post .owl-next{   
    margin-top: 30px;
}

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 18%; // <--- this one
    opacity: 0.5;
}

.single-carousel  .owl-prev,
.single-carousel .owl-next{ 
    position: absolute;
    top: 80px;
    opacity: 0.5;
}