如何使滑塊控件保持在同一位置

Question

我的網站上有這個滑塊，其中有多張幻燈片，每張幻燈片的下面都有不同的文字。 問題是，當文本較長時，控件會向上和向下移動一點.....參見此處， http：//prntscr.com/5d2veh 。 如何使控件保持在圖片中央？

非常感謝！

附言：如果您在我的問題中發現有東西沒有得到很好的解釋或任何其他內容，請告訴我，以便下次我可以提出更好的問題:)

碼：

<!-- 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或輪播圖片的高度如何。