對齊中心和中心標記不起作用

Question

我想在中心顯示分頁，但顯示在左側。我也嘗試中心標籤和ALIGN =中心屬性，但它不工作....

分頁顯示在頁面

#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

從裏取出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>

Answer 2

有中心有2個改變。

更改1-將＃分頁的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; 
}