我怎样才能让我的滑块控件保持在同一位置

Question

我在我的网站中有这个滑块，每个幻灯片都有多个幻灯片和不同的文本。问题是，当文本更长的时候，控件会上下一点点......看这里，http://prntscr.com/5d2veh。我怎样才能让我的控件保持在中间的图片中心？

非常感谢！

P.S.如果你看到我的问题的事情，其心不是很好的解释或任何东西，请告诉我，这样我就可以做一个更好的问题下一次:)

代码：

<!-- Locations --> 
<div class="panel-box"> 
    <div class="titles"> 
     <h4>Clubs</h4> 
    </div> 
    <!-- Locations Carousel --> 
    <ul class="single-carousel" id="loc-carousel"> 
     <li> 
      <img src="static/img/blog/1.jpg" alt="" class="img-responsive" > 
      <div class="info-single-carousel"> 
       <h4>Rijssen</h4> 
       <p><b>Risnestars</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p> 
      </div> 
     </li> 
     <li> 
      <img src="static/img/blog/2.jpg" alt="" class="img-responsive"> 
      <div class="info-single-carousel"> 
       <h4>Hengelo</h4> 
       <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p> 
      </div> 
     </li> 
     <li> 
      <img src="static/img/blog/3.jpg" alt="" class="img-responsive"> 
      <div class="info-single-carousel"> 
       <h4>Oldenzaal</h4> 
       <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p> 
      </div> 
     </li> 
     <li> 
      <img src="static/img/blog/3.jpg" alt="" class="img-responsive"> 
      <div class="info-single-carousel"> 
       <h4>Enschede</h4> 
       <p><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br><b>Clubnaam</b><br>Adres<br>Plaatsnaam, Postcode<br>Telefoonnummer<br><br></p> 
      </div> 
     </li> 
    </ul> 
    <!-- Locations Carousel --> 
</div> 
<!-- End Locations --> 

CSS：

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

• 编辑 - 1 在CSS中，owl-prev和owl-next是控件。一个Javascript插件使这个。

Answer 1

这是因为控制和使用百分比定位：

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

由于它是包装容器的百分比，较大的容器将意味着top属性更大的值。

如果您知道IMG的高度始终将是你可以将它们设置为一组值，如相同：

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

不知道标记是什么样的插件后，已经解析了DOM并且改变了标记，但是很难说如果存在另一种将这些相对于img或传送带定位的方式，以允许百分比宽度使它们在中间很好地坐，而不管img或传送带图像高度。