Question

我想让按钮始终在图像中间垂直对齐。我可以使用.img-responsive使图像响应，但是我无法使箭头始终位于图像的中间。我怀疑这个问题是因为我无法使箭头div的高度等于图像的高度。有没有办法呢？

这是我的jsFiddle ..

PS：对于那些能想出更好的词的人，请更改标题.. ^^

Answer 1

这是Javascript / Jquery中的一个简单解决方案。诀窍是每次调整浏览器ID时根据图像的高度调整每个NAV按钮的位置。将图像高度除以2将使您获得图像的中心，即您想要按钮的位置。仅使用此值是不够的，您还需要获取导航按钮的中心值。减去每个值将为您提供按钮的实际位置值。每次响应缩放图像时，ScreenResize函数将更新位置。

$(function(){
    //Call On Resize event on load
    screenResize();
    //Bind On Resize event to window
    window.onresize = screenResize;
});

function screenResize() {
    //Adjust Nav buttons position according to image height
    $('.nav_btn').css({
        'top': (($('.center-block').height() / 2)-($('.nav_btn').height() / 2))
    });    
}

另外，将按钮的行高更改为此，有助于：

.nav_btn p{
    line-height: 1.25;
}

最后，如有必要，使用Media-Queries更改按钮font-size和line-height。此外，正如用户Valentin所说，使用导航按钮的图像也可以更容易，您也不必使用媒体查询。

示例JSFIDDLE

Answer 2

仅CSS解决方案。使用显示表和table-cell组合，您可以实现所需的目标。据我所知，我以前从未真正尝试过这种方法，但是我找到了一个解决方案，这为我提供了一个很好的起点，可以实现我所需要的。

诀窍是拥有一个拥有显示表属性的容器。在该包装器中，您将拥有所有其他元素，这些元素将拥有table-cell属性，以使它们正常运行并将它们彼此相邻堆栈，就像表单元格所做的那样。

通过为表格单元格提供100％的高度，它们将使自己适应包装器的高度，使您有机会使用名称中的方便的小表属性：vertical align。使用中间垂直对齐属性可以完美地居中导航按钮。

为您的图片提供最大宽度100％属性，以获得正确的响应行为。但是不要使用bootstrap自己的图像响应类，因为它包含我们不想要的css属性，这会混淆我们的布局。

我稍微重写了html，以便每个元素以正确的顺序完美对齐。

工作示例JSFIDDLE

HTML：

<div class="row">
    <div class="col-xs-12">
        <div class="image-container">
            <div class="prev-btn nav-btn"> < </div>
            <div class="inner-container">
                <img src="http://farm9.staticflickr.com/8072/8346734966_f9cd7d0941_z.jpg" class="center-block">
            </div>
            <div class="next-btn nav-btn"> > </div>
        </div>
    </div>
</div>

CSS：

.image-container{
    display:table;
    height: 100%;
    text-align:center;
}

.inner-container{
    display:table-cell;
    width: 100%;
    height: 100%;
    padding: 0 15px;
    vertical-align: middle;
    text-align: center;
}

.inner-container img{
    width: 100%;
    height: auto;
    max-width: 100%;
}

.nav-btn{
    font-size:50px;
    font-weight:700;
    font-family: monospace;
    color: #000;
    cursor:pointer;
}

.nav-btn:hover{
    color: #B6B6B6;
}

.prev-btn{
    position: relative;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

.next-btn{
    position: relative;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
}

如何完美垂直对齐导航按钮与响应图像

2 个答案: