เว็บบอร์ด PHP เว็บส่งเสริมการเรียนรู้ Hosting CRM ERP Server Programming ถาม-ตอบปัญหา

<div class="pagination-toolbar clearfix text-center" style="
  <ul>
	<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
	<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
	<li><span class="pagenav">1</span></li>			
	<li><a href="/th/brand.html?start=10" class="pagenav">2</a></li>		
	<li class="pagination-next"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
	<li class="pagination-end"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
  </ul>
</div>

.pagination-toolbar li:not(.pagination-start):not(.pagination-prev) > span {
    color: #fff;
    background-color: #3b5998;

}
.pagination-toolbar ul:not(.pagination-list) li > a, .pagination-toolbar ul:not(.pagination-list) li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: 0px;
    line-height: 1.42857143;
    color: #000066;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #000066;
}
.pagination-toolbar>ul{
    list-style-type: none;

}

.pagination-toolbar li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span {
    color: #000066;
    background-color: #fff;
}

.clearfix {
    clear: both;
}

ต้องการให้ตัวแบ่งหน้าอยู่ตรงกลางให้ตรงกับ หน้าที่ 1 จาก 2 และเมื่ออยู่ในหน้าจอมือถือก็ต้องอยู่ตรงกลางด้วยค่ะ

[attachment=2]what.jpg[/attachment]

[b]โค้ด PHP [/b]
[code]
<div class="pagination-toolbar clearfix text-center" style="
<ul>
<li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
<li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
<li><span class="pagenav">1</span></li>
<li><a href="/th/brand.html?start=10" class="pagenav">2</a></li>
<li class="pagination-next"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
<li class="pagination-end"><a title="" href="/th/brand.html?start=10" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
</ul>
</div>
[/code]


[b]โค้ด CSS[/b]
[code]
.pagination-toolbar li:not(.pagination-start):not(.pagination-prev) > span {
color: #fff;
background-color: #3b5998;

}
.pagination-toolbar ul:not(.pagination-list) li > a, .pagination-toolbar ul:not(.pagination-list) li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: 0px;
line-height: 1.42857143;
color: #000066;
text-decoration: none;
background-color: #fff;
border: 1px solid #000066;
}
.pagination-toolbar>ul{
list-style-type: none;

}

.pagination-toolbar li:not(.pagination-start):not(.pagination-prev):not(.pagination-next):not(.pagination-end) > span {
color: #000066;
background-color: #fff;
}

.clearfix {
clear: both;
}
[/code]
[list]โดย CSS .clearfix ใช้กับตัวอื่นด้วย[/list]

[color=#FF0040]ลองแก้ CSS เป็นดังรูป [/color]
[attachment=1]loi1.jpg[/attachment]

แต่พอมาเป็นโหมดมือถือตัวแบ่งหน้าจะไม่ได้อยู่ตรงกับคำว่า หน้าที่ 1 จาก 2 ค่ะ
[attachment=0]loi2.jpg[/attachment]