中心导航药丸页面上但固定的位置(center nav-pills on page but have

我想有一组NAV-药丸，我将显示在窗口中@media底部（最大宽度：767px），并在屏幕的在@media顶部（最小宽度：768px）下面是NAV-丸。 我可以把它居中没有问题。 如果我添加位置固定，并把它放在页面底部的我不再能够使用inline-block的与文本对齐中心。

我怎样才能拥有的资产净值都药丸中心，并固定到一定的高度？

HTML

<ul id="thisMenu" class="nav nav-pills">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
</ul>

CSS

#thisMenu > li {
    float:none!important;
    display:inline-block!important;
}

#thisMenu {
    text-align:center!important;
}

http://jsbin.com/ojuyam/1/edit

这jsbin显示它在页面的底部，但不集中。 （也不会粘到窗口的底部，它坚持在页面底部）。

http://jsbin.com/ojuyam/5/edit

Answer 1:

你只需给它的宽度。 如果您添加width: 100%; 它会工作。 见http://jsbin.com/ojuyam/6/edit

Answer 2:

像这样的东西应该工作：

#thisMenu {
    width: 148px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    margin-left: -74px;
}

所以才会这样的：

#thisMenu {
    position: fixed;
    bottom: 20px;
    text-align: center;
    width: 100%;
}

文章来源: center nav-pills on page but have fixed position