center nav-pills on page but have fixed position

I want to have a set of nav-pills that I will display at the bottom of the window in @media (max-width: 767px) and at the top of the screen at @media (min-width: 768px) Below is the nav-pills. I can make it center without issue. If I add position fixed and put it at the bottom of the page I am no longer able to use the inline-block with the text-align center.

How can I have the nav-pills both centered and fixed to a certain height?

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

This jsbin shows it at the bottom of the page, but not centered. (also does not stick to bottom of the window, it sticks to bottom of the page.)

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

Answers


You just need to give it a width. If you add width: 100%; it will work. See http://jsbin.com/ojuyam/6/edit


Need Your Help

Add home image to breadcrumb nav

html css breadcrumbs

I am trying to get a small house icon on my breadcrumb navigation bar. Similar to this:

How to detect two-finger tap in Android?

android multi-touch gesture

I need to detect two-finger tap in an Android app I'm working on. I'm also using ScaleGestureDetector and GestureDetector to detect tap, double-tap, long press and scale.