我怎樣才能讓我的滑塊控件保持在同一位置

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或傳送帶圖像高度。