I would like the div to be centered horizontally with a fixed position, but it doesn't seem to work in my code. Can someone help me troubleshoot?
Check out the demo here.
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;
}