Question

我希望div在水平居中并且位置固定，但它不在我的代码中：怎么回事？

DEMO：https://output.jsbin.com/rawabeguri/1

HTML：

<div id="fancybox-thumbs" class="bottom" style="width: 675px;">
    <ul style="/* left: 633px; */">
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(1);"><img src="http://up.grdagrd.com/uploads/b1cf3b464aa26e0dd4cc2e3fabeae20a_80.jpg" style="width: 75px; height: 56px; top: -3px; left: 0px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(2);"><img src="http://up.grdagrd.com/uploads/d1c559d01ca52cc040e6d84fbd22a73c_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
        <li class=""><a style="width: 77px; height: 52px;" href="javascript:jQuery.fancybox.jumpto(3);"><img src="http://up.grdagrd.com/uploads/076f90e118858482b7ad97fa6106b2b6_80.jpg" style="width: 60px; height: 80px; top: -15px; left: 7px;"></a></li>
    </ul>
</div>

CSS：

#fancybox-thumbs {
    position: fixed;
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
}
#fancybox-thumbs ul {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}
#fancybox-thumbs ul li.active {
    padding: 0;
    border: 1px solid #fff;
}
#fancybox-thumbs ul li {
    float: left;
    padding: 1px;
}

Answer 1

由于您的 fancybox-thumbs div的宽度为675像素，只需添加左= 50％并将其向后拉，并留下负边距：

#fancybox-thumbs {    
    height: 55px;
    overflow: hidden;
    z-index: 8050;
    position: fixed;
    width: 675px;
    left: 50%;
    margin-left: -337.5px;
}

Answer 2

如果你添加保证金：auto;对于div的css，它应该水平对齐div

Answer 3

我只是尝试改变css

#fancybox-thumbs {
position: fixed;
height: 55px;
overflow: hidden;
z-index: 8050;
width: 100% !important;
top: 45%;
text-align: center;

}

在CSS中定位固定水平居中

3 个答案: