seems that the text-align: center is needed after all (sorry for the bad
info - I got rid of the margin auto too worked earlier but seems it is not
now)
this is what I have working in chrome, firefox, ie9 (ie8 ie7 compat modes
too), opera & firefox mobile (emulator)
the problem is that with long sets of li they will align left when the
containing area is not wide enough (this is the case in all browsers I
tested)
css:
.central-nav {
text-align: center;
width: auto;
margin-left: -20px
}
.central-nav .nav-pills {
display:inline-block;
zoom:1;
*display: inline;
}
html:
<div class="row-fluid">
<div class="span12">
<div class="central-nav">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li><li><a
href="#">Profile</a></li><li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="central-nav">
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li><li><a
href="#">Profile</a></li><li><a href="#">Messages</a></li><li><a
href="#">Messages</a></li><li><a href="#">Messages</a></li>
<li><a href="#">Messages</a></li><li><a
href="#">Messages</a></li><li><a href="#">Messages</a></li>
</ul>
</div>
</div>
</div>
others may well lambast this approach and offer a better method or have a
suggestion to add :)
- S
On 9 February 2012 23:52, tom12010 <[email protected]> wrote:
> you're suggesting this code for the <li> items??
> margin left & right auto for the ul
> display: inline-block; for the ul or for the li??
>
> <aircode>
> I can try approximately:
> div#footer-nav .nav .nav-pills {
> margin-left: auto;
> margin-right: auto;
> }
> div#footer-nav .nav .nav-pills li {
> float: none;
> display:inline-block;
> zoom:1;
> *display: inline;
> }
> </aircode>
> Is that approximately what you're suggesting??
>
> Thank you, Tom
>
>
> On Feb 9, 5:22 pm, Sam Sherlock <[email protected]> wrote:
> > Rober Nyman has an article on inline-blockhttp://
> robertnyman.com/2010/02/24/css-display-inline-block-why-it-roc...
> >
> > often cool things can bite back
> >
> > - S
> >
> > On 9 February 2012 22:11, Sam Sherlock <[email protected]> wrote:
> >
> > > apply display: inline-block; and remove the width
> >
> > > think you may need some additional work (js)
> > > for ie browsers - check the less source and look at .help-inline
> > > it may be of help - but I have not looked into it
> >
> > > - S
> >
> > > On 9 February 2012 21:57, tom12010 <[email protected]> wrote:
> >
> > >> Thank you...this works -- but the menu is automatically generated and
> > >> its width could change whenever someone (not me) adds a new page to
> > >> the site.
> > >> How does one plan and account for changing list size with this
> > >> method?? Is there another way???
> > >> Normally one can easily center a list of links and not have to worry
> > >> about its size changing -- not with Bootstrap tho.
> > >> nav is also a class declared in bootstrap...
> > >> Thank you, Tom
> >
> > >> On Feb 9, 4:43 pm, Sam Sherlock <[email protected]> wrote:
> >
> > >> > <ul class="nav nav-tabs" style="width: 600px; margin-left: auto;
> > >> > margin-right: auto">
> > >> > <li class="active"><a href="#">Home</a></li>
> > >> > <li><a href="#">Profile</a></li>
> > >> > <li><a href="#">Messages</a></li>
> > >> > </ul>
> >
> > >> > by default the nav will expand to the full available width
> >
> > >> > - S
> >
> > >> > On 9 February 2012 21:27, tom12010 <[email protected]> wrote:
> >
> > >> > > Centering a nav list is easy to do usually...
> >
> > >> > > However, applying text-align:center doesn't cause the nav-pills
> > >> > > content to center...why??
> >
> > >> > > I can write other/different css/list code but I'd really puzzled
> by
> > >> > > this -- nothing in the css indicates that nav or nav-pills can't
> be
> > >> > > centered in the browser window.
> >
> > >> > > Thank you, Tom
>
