CSS 中的底部中心（拇指托盘）答案

【问题标题】：Bottom Center in CSS (thumb tray)CSS 中的底部中心（拇指托盘）
【发布时间】：2014-03-06 06:17:36
【问题描述】：

我花了几个小时在谷歌上搜索如何做到这一点，并尝试了许多不同的方法。我不能让这个拇指托盘在页面底部居中。想看看是否有人可以帮助我。这是网站。 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 的背景但是这个对我来说很混乱。

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

【问题讨论】：

标签： jquery html css helper

【解决方案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;
}

【讨论】：