Question

我有一个带有一些图像和标题的旋转木马：

    <div class="photo-carousel">

        <div class="carousel-arrow">
            <a href="javascript:void(0);">
                <i class="arrow-left"></i>
            </a>
        </div>

        <ul class="photo-list">
            <li class="photo">
                <div class="image-wrap">...</div>

                <div class="title">....</div>

                <div class="description">...</div>
            </li>

            <li class="photo">
                <div class="image-wrap">...</div>

                <div class="title">....</div>

                <div class="description">...</div>
            </li>
        </ul>

        <div class="carousel-arrow">
            <a href="javascript:void(0);">
                <i class="arrow-right"></i>
            </a>
        </div>
    </div>

jsfiddle链接：http://jsfiddle.net/u21ezn9y/

如何通过.image-wrap对齐.carousel-arrow元素，而不是li height？我希望箭头将在图像中间对齐。最好的方法是什么？

Answer 1

您还可以设置一些绝对或相对定位...

.carousel-arrow{
position: absolute;
top: 50%;
margin-top: -2.5em;//depending on arrow
}

然后你将right:10px设置为右边，left:10px设置为左边，这就是旋转木马箭头通常设置的方式......

Answer 2

仅使用HTML / CSS，我会删除.image-wrap上的边距，并对您的描述进行绝对定位。通过这种方式，这些标签不会计入li高度，以箭头为中心。

.image-wrap {
    width: 170px;
    height: 220px;
    background: red;
}

.title {
    position: absolute;
    bottom: -50px;
}

.description {
    position: absolute;
    bottom: -70px;
}

JSFiddle：http://jsfiddle.net/u21ezn9y/2/

尝试一下，让我知道它是否有帮助！

如果可能的话，只能按图像HTML / CSS对齐箭头

2 个答案: