html - 在页面上居中导航药丸，但位置固定

Question

我想要一组导航药片，我将在@media（最大宽度：767px）的窗口底部和@media（最小宽度：768px）的屏幕顶部显示下面是导航药丸。我可以毫无问题地使它居中。如果我添加位置固定并将其放在页面底部，我将不再能够使用带有文本对齐中心的内联块。

我怎样才能让导航药丸居中并固定到一定高度？

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%;
}