如何将背景图像放置在容器边缘的中心

Question

我试图在我设置的旋转木马的两侧放置两个背景图像（导航箭头）。垂直对齐似乎不起作用。

scroll_left＆amp; 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%＆amp; translateY(-50%)

这是fiddle

Answer 2

使用unordered list标记完成工作的简化代码：

无序列表使得设计这样的页面变得更加容易，这些页面需要一个元素的不同侧面的元素。

CSS：

<style>    
    #scroll_right {
        background-color: blue;
        width: 400px;
        height: 300px;
    }

    #scroll_left {
        background-color: yellow;
        width: 400px;
        height: 300px;
    }

    #carousel_list {
        width: 400px;
    }

    .carousel_wrapper > li {
        display: inline-block;
    }
}
</style>

HTML：

<ul class="carousel_wrapper">
    <li>
        <div id="scroll_left"></div>
    </li>
    <li>
        <ul id="carousel_list">
            <li><img src='img/money-tree.jpg'></img></li>
            <li><img src='img/money-tree.jpg'></img></li>
            <li><img src='img/money-tree.jpg'></img></li>
        </ul>
    </li>
    <li>
        <div id="scroll_right"></div>
    </li>
</ul>

实施例：

Answer 3

请参阅 pen

我想指出，您实际上想要垂直对齐背景图像所在的包含div，而不是背景图像本身，因为它们位于小容器内。

您可以vertical-align: middle使用display: inline-block：div#scroll_left＆amp; div#scroll_right。没有其他说法，所以我会让笔进行说话，以下是代码：

HTML：

<div class="carousel_wrapper"><div id="scroll_left"></div>
  <div id="carousel_list">
    <div><img src="http://baconmockup.com/300/200"></img></div>
  </div>
<div id="scroll_right"></div>

LESS：

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

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

        div#carousel_list {
            display: inline-block;
            vertical-align: middle;
                img {
                    border-radius: 50%;
                    width: 100%;
                    height: auto;
                    -webkit-box-shadow: inset 0 0 4px #333;
                    box-shadow: inset 0 0 4px 2px #333;
                    display: block;
                }
            }
        }