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或轮播图像高度如何，宽度都能使它们恰好位于中间位置。

如何让滑块控件保持在同一位置

1 个答案: