在猫头鹰轮播箭头滑块

Question

我的页面中有一个猫头鹰旋转木马设置，我在滑块旁边做了一个自定义箭头，所以它看起来像这样：

我想要的是在旁边的箭头中间垂直对齐，左箭头应该左对齐，右箭头对齐。我想反应性地做，但我不知道如何。你能救我吗？

这是我的代码：

<div class="container-fluid">
    <div class="col-sm-1" style="border: 1px solid #ccc">
        <div class="owl-carousel-arrows">
            <div class="prev">
                <img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-left.png" class="img-responsive" />
            </div>
        </div>
    </div>
    <div class="col-sm-10">
        <div class="owl-carousel">
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant1.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant2.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant3.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant4.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant5.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant6.jpg"></div>
            <div class="item"><img src="<?php echo HTTP_HOME_IMAGE; ?>plant7.jpg"></div>
        </div>
    </div>
    <div class="col-sm-1" style="border: 1px solid #ccc">
        <div class="owl-carousel-arrows">
            <div class="next">
                <img src="<?php echo HTTP_HOME_IMAGE; ?>arrow-green-right.png" class="img-responsive" />
            </div>
        </div>
    </div>
</div>

你能告诉我怎么做这个吗？

Answer 1

.owl-carousel-arrows{
    height: 100%;
}

.owl-carousel-arrows > div {
    margin-top: 45%;
}