垂直对齐的绝对定位div

gator 发表于 Dev

鳄鱼

我在摆弄Jquery Cycle幻灯片并尝试添加几个按钮。没有top: #px;假说，我似乎无法真正地将它们对齐。我很想将它垂直对齐到div的中间。

的CSS

#slidecontainer {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    width: 800px;
    height: 200px;
}
.slidecontrols {
    top: 50px;
    position: absolute;
    z-index: 100;
    width: 100%;
}
.slidecontrols a {
    background-color: white;
}
.slidecontrols a.next {
    position: absolute;
    right: 0;
}
.slideshow {
    width: 100%;
    height: 100%;
}
.bannered {
    height: 200px;
    width: 800px;
}

的HTML

<div id="slidecontainer">
    <div class="slideshow" id="slideoptions">
        <img src="http://i.imgur.com/ufZ0cxL.jpg" class="bannered" alt="" /></a>
        <img src="http://i.imgur.com/RZTrFy4.jpg" class="bannered" alt="" /></a>
    </div>
    <div class="slidecontrols">
        <a href="#" class="next">right</a>
        <a href="#" class="prev">left</a>
    </div>
</div>

这是小提琴。添加vertical-align: middle;到.slidecontrols绝对没有任何作用。

乔什·克罗泽（Josh Crozier）

假设控件的高度为20px，则可以使用top值，50%然后使用负值margin-top，该值是元素高度的一半。在这种情况下，-10px。

这里的例子

.slidecontrols {
    top: 50%;
    margin-top: -10px;
    position: absolute;
    z-index: 100;
    width: 100%;
}

或者，如果您需要动态高度的解决方案：

这里的例子

.slidecontrols {
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
    z-index: 100;
    width: 100%;
    height:100%;
    display:table;
}
.slidecontrols a {
    display:table-cell;
    vertical-align:middle;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。