html - 对齐中心和中心标签不起作用

Question

我试图在中心显示分页，但在左侧显示。我也在尝试 center tag 和 align=center 属性，但它不起作用....

分页显示在页面中央

#pagination {
  margin: 40 40 0;
  float: left;
}
ul.tsc_pagination li a {
  border:solid 1px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  padding:6px 9px 6px 9px;
}
ul.tsc_pagination li {
  padding-bottom:1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
  color:#FFFFFF;
  box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
}
ul.tsc_pagination {
  margin:4px 0;
  padding:0px;
  height:100%;
  overflow:hidden;
  font:12px 'Tahoma';
  list-style-type:none;
}
ul.tsc_pagination li {
  float:left;
  margin:0px;
  padding:0px;
  margin-left:5px;
}
ul.tsc_pagination li a {
  color:black;
  display:block;
  text-decoration:none;
  padding:7px 10px 7px 10px;
}
ul.tsc_pagination li a img {
  border:none;
}
ul.tsc_pagination li a {
  color:#0A7EC5;
  border-color:#8DC5E6;
  background:#F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current {
  text-shadow:0px 1px #388DBE;
  border-color:#3390CA;
  background:#58B0E7;
  background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
  background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}

<div id="pagination">
  <ul class="tsc_pagination">
    <!-- Show pagination links -->
    <li></li>
    <li><a class="current">1</a></li>
    <li><a href="http:test.com/page/1">2</a></li>
    <li><a href="http:test.com/page/1">Next</a></li>
    <li></li>
  </ul>
</div>

you can see this

Answer 1

从 li 中删除 Float:left 并添加 display:inline-block

#pagination{
  margin: 40 40 0;
  float: left;
  width:100%;
}
ul.tsc_pagination li a{
  border:solid 1px;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  padding:6px 9px 6px 9px;
}
ul.tsc_pagination li{
  padding-bottom:1px;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current{
  color:#FFFFFF;
  box-shadow:0px 1px #EDEDED;
  -moz-box-shadow:0px 1px #EDEDED;
  -webkit-box-shadow:0px 1px #EDEDED;
}
ul.tsc_pagination{
  margin:4px 0;
  padding:0px;
  height:100%;
  overflow:hidden;
  font:12px 'Tahoma';
  list-style-type:none;
  text-align:center;
}
ul.tsc_pagination li{
  display:inline-block;
  margin:0px;
  padding:0px;
margin-left:5px;
}
ul.tsc_pagination li a{
  color:black;
  display:block;
  text-decoration:none;
  padding:7px 10px 7px 10px;
}
ul.tsc_pagination li a img{
  border:none;
}
ul.tsc_pagination li a{
  color:#0A7EC5;
  border-color:#8DC5E6;
  background:#F8FCFF;
}
ul.tsc_pagination li a:hover,
ul.tsc_pagination li a.current{
  text-shadow:0px 1px #388DBE;
  border-color:#3390CA;
  background:#58B0E7;
  background:-moz-linear-gradient(top, #B4F6FF 1px, #63D0FE 1px, #58B0E7);
  background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0.02, #B4F6FF), color-stop(0.02, #63D0FE), color-stop(1, #58B0E7));
}

<div id="pagination">
  <ul class="tsc_pagination">
  <!-- Show pagination links -->
    <li></li>
    <li><a class="current">1</a></li>
    <li><a href="http://localhost/helpmesave/index.php/home/viewcompaigns/1">2</a></li>
    <li><a href="http://localhost/helpmesave/index.php/home/viewcompaigns/1">Next</a></li>
    <li></li>
  </ul>
</div>