html - 在 div 中心的列表项中显示链接

Question

我在里面制作了一个 ul 和一些 li，然后是一些链接。我想将链接集中到 div 中，但我不能。我试过 text-align:center;但它不工作。这是代码:

CSS:

ul.simple-pagination {
    list-style: none;
}
.simple-pagination {
    display: block;
    overflow: hidden;
    padding: 0 5px 5px 0;
    margin: 0;
}
.simple-pagination ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.simple-pagination li {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}
.light-theme a, .light-theme span {
    float: left;
    color: #666;
    font-size:14px;
    line-height:24px;
    font-weight: normal;
    text-align: center;
    border: 1px solid #BBB;
    min-width: 14px;
    padding: 0 7px;
    margin: 0 5px 0 0;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* IF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}
.light-theme a:hover {
    text-decoration: none;
    background: #FCFCFC;
    color:grey;
}
.light-theme .current {
    background: #666;
    color: #FFF;
    border-color: #444;
    box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
    cursor: default;
}
.light-theme .ellipse {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-weight: bold;
    cursor: default;
}            
#pagination_container {
    max-width: 300px;
    margin: auto;
    border: 2px groove #000;
}

HTML:

<div id="pagination_container">
     <ul class="simple-pagination">
          <li class='light-theme'> <a class='current' href="?page=1">1</a></i> 
          <li class='light-theme'><a href="?page=2">2</a></li> 
          <li class='light-theme'><a href="?page=3">3</a></li> 
          <li class='light-theme'><a href='blog.php?page=2'>Next</a> </li>    
     </ul>
 </div>

Answer 1

您应该将 text-align: center 添加到 li 中，如下所示:

   #pagination_container{ text-align: center }
   .simple-pagination{ display: inline-block; list-style: none }
   .simple-pagination li{ display: inline-block; text-align: center }
.light-theme a, .light-theme span {
   float: left;
color: #666;
font-size:14px;
line-height:24px;
font-weight: normal;
text-align: center;
border: 1px solid #BBB;
min-width: 14px;
padding: 0 7px;
margin: 0 5px 0 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* IF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}

<div id="pagination_container">
     <ul class="simple-pagination">
          <li class='light-theme'><a class='current' href="?page=1">1</a></i><li class='light-theme'><a href="?page=2">2</a></li><li class='light-theme'><a href="?page=3">3</a></li><li class='light-theme'><a href='blog.php?page=2'>Next</a></li>    
     </ul>
 </div>