Question

我花了几个小时来研究如何做到这一点，并尝试了很多不同的东西。我无法将此Thumb Tray置于页面底部的中心位置。想知道是否有人可以帮助我。这是网站。 www.Gabitee.com以及我一直在搞乱的代码......

来自文件supersized.css

/* Thumbnail Tray
----------------------------*/          
#thumb-tray{ background:#fff; position:fixed; z-index:3; bottom:3px; right:0; background: transparent; padding-top: 8px; height:80px; width:100%; overflow:hidden; text-align:center; }

    #thumb-back, #thumb-forward{ position:absolute; z-index: 9999; bottom: -2px; height:108px; width: 40px; }
        #thumb-back{ left:0; background: transparent;}
        #thumb-forward{ right:0; background: transparent no-repeat center center;}
            #thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
                #thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
                #thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }


    #thumb-tray{ display:inline-block; list-style:none; padding:0 0px; background: #fff; }
        ul#thumb-list li{ background:#fff;list-style:none; display:inline; overflow:hidden; float: left; }
            ul#thumb-list li img { opacity:0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=60); margin: 10px 5px 10px 5px; width: 60px; height: 60px; }
            ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
            ul#thumb-list li:hover{ cursor:pointer; }

            #tray-button { position: fixed; right: 50px; top: 20px; cursor: pointer; }

我正在使用firebug和textwrangler（osx）在顶部的＃thumb-tray {}搞乱...我让它移动而不是底部中心......我有JAVA的背景但是这个对我来说很困惑。

这是我第一次在这里提问。我不确定我是否正确询问....大声抱歉...如果您需要更多信息，请告诉我。

Answer 1

添加以下样式将使拇指居中：

#thumb-list {
    text-align: center;     /* Centers the <li> */
    width: 100% !important; /* Overwrites the inline width */
}

ul#thumb-list li {
    display: inline-block;  /* Will get the <li> to wrap the <img> nicely */
    float: none;            /* Allows text-align: center on parent element to kick in */
}

修改：这也有效：

#thumb-list {
    margin: 0 auto;
}

CSS底部中心（拇指托盘）

1 个答案: