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，如下所示：

＆＃13;

   #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 */
}

＆＃13;

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

＆＃13;

Answer 2

您忘记将text-align: center;添加到<ul>。这对你有用吗？

.simple-pagination {
  display: block;
  overflow: hidden;
  padding: 0 5px 5px 0;
  margin: 0;
  text-align: center;
}

.simple-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
  display: block;
  width: 100%;
}

.simple-pagination li {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-block;
}      

.light-theme a, .light-theme span {
  color: #666;
  display: block;
  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%); /* FF3.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 */
  text-decoration: none;
}

.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;
}

<div>
  <ul class="simple-pagination">
    <li class='light-theme'> <a class='current' href="?page=1">1</a></li> 
    <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>

显示div中心列表项中的链接

2 个答案: