2

I have the following code and I want the list to center (right now it pulls to the left). Any idea why?

<div class="row" style="width:100%;text-align:center;">
<div class ="banner span12" style="padding-top: 0px; padding-bottom:0px;text-align:center;">
<p style="font-size:18px;padding-top:6px;"> Or Start Browsing the Library ... </p></center>
</div>
<br>
<br>
<ul class="nav nav-pills" style="text-align:center;">
<li class="active" style="text-align:center;">
    <a href ="#"> Library1 </a>
</li>
<li>
    <a href ="#"> Library2 </a>
</li>
<li>
    <a href ="#"> Library3 </a>
</li>
</ul>

nav-pills CSS:

.nav-pills > li > a {
  padding-top: 8px;
  padding-bottom: 8px;
  margin-top: 2px;
  margin-bottom: 2px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
  color: #ffffff;
  background-color: #0088cc;
}
user1328021
  • 9,110
  • 14
  • 47
  • 78
  • 1
    Can we take a look at your `ul`, `li` and `"nav nav-pills"` class declarations? Also, what browser are you talking about? It centers perfectly in Chrome: http://jsfiddle.net/E2cT7/ – Oleg Dec 10 '12 at 18:36
  • I see you're using bootstrap. The following links might have the answer to your question: http://stackoverflow.com/questions/9421966/how-do-i-center-the-twitter-bootstrap-tabs-on-the-page and http://stackoverflow.com/questions/7165423/twitter-bootstrap-center-pills – Oleg Dec 10 '12 at 19:00
  • Thanks Oleg that was the problem. – user1328021 Dec 10 '12 at 19:04

1 Answers1

2

give it a width and apply margin: 0 auto;

ul.nav-pills {
    width: 300px;
    margin: 0 auto;
}

<div class="row" style="width:100%;text-align:center;">
<div class ="banner span12" style="padding-top: 0px; padding-bottom:0px;text-align:center;">
<p style="font-size:18px;padding-top:6px;"> Or Start Browsing the Library ... </p></center>
</div>
<br>
<br>
<ul class="nav nav-pills" style="text-align:center;">
<li class="active" style="text-align:center;">
    <a href ="#"> Library1 </a>
</li>
<li>
    <a href ="#"> Library2 </a>
</li>
<li>
    <a href ="#"> Library3 </a>
</li>
</ul>
Mik
  • 1,705
  • 1
  • 14
  • 26
  • Your code centers the ul box on my page (but the li elements are not centered within the ul)... how do I now center the individual list elements in the ul to center within the ul definition? Also, can you explain what margin does? – user1328021 Dec 10 '12 at 18:47
  • http://jsfiddle.net/Gfjg2/ here is the code... if you dont have any other css overriding your styles it should work.. come back if it doesnt :) – Mik Dec 10 '12 at 18:49
  • I'm still having the problem where it's not centering exactly. Here's the updated code: http://jsfiddle.net/U8HGz/688/ – user1328021 Dec 10 '12 at 19:28
  • http://jsfiddle.net/U8HGz/691/ ... maybe this helps. the width of the ul needs to fit exactly and if you care about the left and right paddings of the ul it will be centered – Mik Dec 10 '12 at 19:44