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

Question

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

这是我的 jsFiddle ..

PS:谁能想出更好的词请改标题..^^

Answer 1

仅 CSS 解决方案。使用显示表格和表格单元组合，您可以实现您正在寻找的内容。据我所知，我以前从未真正尝试过，但经过一番搜索后找到了一个解决方案，它为我提供了一个很好的起点来实现我所需要的。

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

通过为您的表格单元格提供 100% 的高度，它们将自行适应包装器的高度，让您有机会使用名为:垂直对齐的方便的小表格属性。使用中间垂直对齐属性使导航按钮完美居中。

为您的图像提供 max-width 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;
}