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: absolute与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;
}

Bootstrap span1水平定位

1 个答案:

See the jsFiddle