Question

我有以下代码，我希望列表居中（现在它向左拉）。知道为什么吗？

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

Answer 1

给它一个宽度并应用保证金：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>

无法将我的列表项目置于中心位置

1 个答案: