twitter-bootstrap - Bootstrap span1 水平定位

Question

我这里有一个问题的例子

http://patrickmchugh.com/template-image-nav-bootstrap.html 我试图让图像两侧的导航箭头位于窗口的一半。

我尝试过表格、填充、边距，但没有成功。有什么建议么

    <div class="container-fluid">
        <div class="row-fluid">
                <div class="span1">
                    <img src="images/leftArrow.png" alt="back one image"></div>
        <div class="span10 pagination-centered">
                    <img src="images/fashion-1.jpg" alt="fashion-photo"></div>
        <div class="span1">
                    <img src="images/rightArrow.png" alt="next"></div>
        </div>
    </div>

Answer 1

我会使用position: absolutewith top: 50%。具有箭头图像高度的负边距顶部使垂直居中。

将<div>图像包围display: inline-block起来，使其与图像一样宽，而不是全屏。填充使箭头落在图像旁边而不是在它们之上。添加一个容器以将其全部居中。

<div class="mycontainer">
    <div class="mycarousel">
        <img class="arrow-prev" src="http://patrickmchugh.com/images/leftArrow.png" alt="previous" />
        <img class="arrow-next" src="http://patrickmchugh.com/images/rightArrow.png" alt="next" />
        <img src="http://patrickmchugh.com/images/fashion-1.jpg" alt="fashion-photo" />
    </div>
</div>

CSS

.mycontainer {
    text-align: center;
}

.mycarousel {
    position: relative;
    padding: 0 25px;
    display: inline-block;
    max-width: 100%;
}

.mycarousel img {
   max-width: 100%;    
}
.arrow-prev {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -7px;
}

.arrow-next {
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -7px;
}

见 jsFiddle