Question

我试图在中心显示分页但在左侧显示。我也尝试使用中心标签和对齐=中心属性，但它不起作用....

分页显示在页面中心

#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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

有2项更改。

更改1-将#pagination的css更改为以下。

#pagination {
  width: 100%;
  text-align: center;
}

更改2-制作ul.tsc_pagination li not have float而不是使用display:inline-block。改变css如下。

ul.tsc_pagination li {
  /*  float: left;*/
  /*Dont use float:left*/
  display: inline-block;
  margin: 0px;
  padding: 0px;
  margin-left: 5px;
}

#pagination {
  width: 100%;
  text-align: center;
}

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;*/
  /*Dont use float:left*/
  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>

Answer 3

试试这个https://jsfiddle.net/g3643p4q/4/ 只有豪宅

ul.tsc_pagination li {
    display: inline-block;
    float: none;
    margin: 0 0 0 5px;
    padding: 0;
}
ul.tsc_pagination {
    font: 12px "Tahoma";
    height: 100%;
    list-style-type: none;
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    text-align: center;
}

#pagination {
    float: none;
}

对齐中心和中心标记不起作用

3 个答案: