在页面上居中导航药丸但位置固定答案

【问题标题】：center nav-pills on page but have fixed position在页面上居中导航药丸但位置固定
【发布时间】：2013-04-25 11:16:09
【问题描述】：

我想要一组导航药片，我将在@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

【问题讨论】：

这样的东西？ jsbin.com/ojuyam/2/edit
添加清除使导航药丸不再居中。我添加了一个底部属性将其扔到底部。 jsbin.com/ojuyam/5/edit，但仍未居中。

标签： html css twitter-bootstrap

【解决方案1】：

你只需要给它一个宽度。如果您添加width: 100%;，它将起作用。见http://jsbin.com/ojuyam/6/edit

【讨论】：

【解决方案2】：

这样的事情应该可以工作：

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

这样也可以：

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

【讨论】：