CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user1328021
user1328021

Reputation: 9820

Can't get my list items to center

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

Upvotes: 2

Views: 1794

Answers (1)

Mik
Mik

Reputation: 1703

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>

Upvotes: 2

Related Questions