jquery - 如何将背景图像定位在容器边缘的中心

Question

我正在尝试将两个背景图像(用于导航的箭头)放置在我已设置的旋转木马的任一侧。垂直对齐似乎不起作用。

scroll_left 和 scroll_right 是我想放置在旋转木马两侧的两个 div。

section.carousel {
    div.container {
        div.row {
            div.carousel_wrapper {
                background-color: #fff;
                width: 100%;
                height: 300px;

                div#scroll_left {
                    display: block;
                    float: left;
                    background: url( '@{sitePath}/arrow_left.png') center no-repeat;
                    width: 40px;
                    height: 40px;
                    vertical-align: middle;
                }
                div#scroll_right {
                    float: right;
                    display: block;
                    background: url( '@{sitePath}/arrow_right.png') center no-repeat;
                    vertical-align: middle;
                    width: 40px;
                    height: 40px;
                }

                div#carousel_list {
                    div {
                        float: left;
                        img {
                            border-radius: 50%;
                            width: 100%;
                            height: auto;
                            -webkit-box-shadow: inset 0 0 4px #333;
                            box-shadow: inset 0 0 4px 2px #333;
                        }
                    }
                }
            }
        }
    }
}

echo "<div class=\"carousel_wrapper\"><div id=\"scroll_left\"></div>";

echo        "<div id=\"carousel_list\">";

echo            "<div><img src=\"{IMAGE}\"></img></div>";
echo            "<div><img src=\"{IMAGE}\"></img></div>";
echo            "<div><img src=\"{IMAGE}\"></img></div>";

echo        "</div>";

echo "<div id=\"scroll_right\"></div></div>";

Answer 1

你可以添加top:50% & translateY(-50%)

这是一个fiddle