Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

HTML Basic
สำหรับนักพัฒนาเว็บไซต์มือใหม่ HTML , CSS และการใช้ Tools ต่างๆ ในการพัฒนาเว็บไซต์

Moderator: mindphp

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

โพสต์โดย pprn » 28/10/2018 5:34 pm

อยากให้ตัวแบ่งหน้า (pagination) อยู่กึ่งกลางหน้าเว็บ ใน Joomla 3.8 แต่ไม่สามารถทำได้ค่ะ

ตอนนี้ที่ทำได้ตัวแบ่งหน้า (pagination) ยังอยู่ฝั่งซ้ายของหน้าเว็บ ดังรูป
pag.jpg


โค้ดหน้า index.php

โค้ด: เลือกทั้งหมด

<link rel = "stylesheet" type = "text/css" href = "style1.css" >

    <div class="pagination-toolbar clearfix text-center">
                  <ul>
                     <li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
                     <li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
                     <li><a href="" class="pagenav">1</a></li>
                     <li><a href="" class="pagenav">2</a></li>
                     <li><a href="" class="pagenav">3</a></li>
                     <li><a href="" class="pagenav">4</a></li>
                     <li><a href="" class="pagenav">5</a></li>
                     <li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
                     <li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
                  </ul>
    </div>
<br/><br/>
    <p class="counter">
        หน้าที่ 1 จาก 2               
</p>


โค้ด CSS

โค้ด: เลือกทั้งหมด

.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;
    text-align: center
}

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



อยากรู้ว่าต้องเพิ่มโค้ดตรงไหนใน CSS บ้างคะ
ขอบคุณค่ะ

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 13267
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

โพสต์โดย thatsawan » 28/10/2018 9:32 pm

ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

โพสต์โดย pprn » 28/10/2018 11:09 pm

thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>


ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

โค้ด: เลือกทั้งหมด

<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
    <div class="pagination-toolbar clearfix text-center">
                  <ul>
                     <li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
                     <li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
                     <li><a href="" class="pagenav">1</a></li>
                     <li><a href="" class="pagenav">2</a></li>
                     <li><a href="" class="pagenav">3</a></li>
                     <li><a href="" class="pagenav">4</a></li>
                     <li><a href="" class="pagenav">5</a></li>
                     <li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
                     <li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
                  </ul>
    </div>
</center>
<br/><br/>
    <p class="counter">
        หน้าที่ 1 จาก 2            
    </p>


ผลลัพธ์
gr1.jpg


เลยลองสร้างเมนูและเรียกใช้ bootstrap ดูก็ทำให้อยู่กึ่งกลางได้ปกติค่ะ

โค้ด: เลือกทั้งหมด

<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
<ul class="nav nav-list">
    <li class="active">
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">Profile</a>
    </li>
    <li>
        <a href="#">Messages</a>
    </li>
</ul>
</center>


ผลลัพธ์
gr2.jpg


อยากรู้ว่าหนูทำอะไรผิดไปหรือเปล่า
ขอบคุณค่ะ

ภาพประจำตัวสมาชิก
thatsawan
PHP VIP Members
PHP VIP Members
โพสต์: 13267
ลงทะเบียนเมื่อ: 31/03/2014 10:02 am
ติดต่อ:

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

โพสต์โดย thatsawan » 28/10/2018 11:32 pm

pprn เขียน:
thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>


ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

โค้ด: เลือกทั้งหมด

<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
    <div class="pagination-toolbar clearfix text-center">
                  <ul>
                     <li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
                     <li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
                     <li><a href="" class="pagenav">1</a></li>
                     <li><a href="" class="pagenav">2</a></li>
                     <li><a href="" class="pagenav">3</a></li>
                     <li><a href="" class="pagenav">4</a></li>
                     <li><a href="" class="pagenav">5</a></li>
                     <li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
                     <li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
                  </ul>
    </div>
</center>
<br/><br/>
    <p class="counter">
        หน้าที่ 1 จาก 2            
    </p>



น่าจะมี CSS ตัวอื่นๆ บังคับชิดซ้ายอยู่ อาจจะต้องใช้ การเขียน Class ใหม่เข้ามาทับ

ภาพประจำตัวสมาชิก
pprn
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 565
ลงทะเบียนเมื่อ: 02/07/2018 10:45 am

Re: Q - จัดตัวแบ่งหน้า (pagination) ให้อยู่กึ่งกลางไม่ได้ค่ะ

โพสต์โดย pprn » 29/10/2018 11:57 am

thatsawan เขียน:
pprn เขียน:
thatsawan เขียน:ถ้าใช้ bootstrap มันมี <center>บลาๆๆ </center>


ไม่แน่ใจว่าทำถูกไหมคะ แต่ลองทดสอบดู โดยใส่ <center>... </center> ครอบ pagination ก็ยังไม่อยู่กึ่งกลางค่ะ แต่ขยับขึ้นไปติดขอบเว็บไซต์

โค้ด: เลือกทั้งหมด

<link rel = "stylesheet" type = "text/css" href = "style1.css" >
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<center>
    <div class="pagination-toolbar clearfix text-center">
                  <ul>
                     <li class="pagination-start"><span class="pagenav">เริ่มต้น</span></li>
                     <li class="pagination-prev"><span class="pagenav">ก่อนหน้า</span></li>
                     <li><a href="" class="pagenav">1</a></li>
                     <li><a href="" class="pagenav">2</a></li>
                     <li><a href="" class="pagenav">3</a></li>
                     <li><a href="" class="pagenav">4</a></li>
                     <li><a href="" class="pagenav">5</a></li>
                     <li class="pagination-next"><a title="" class="hasTooltip pagenav" data-original-title="ต่อไป">ต่อไป</a></li>
                     <li class="pagination-end"><a title="" class="hasTooltip pagenav" data-original-title="สุดท้าย">สุดท้าย</a></li>
                  </ul>
    </div>
</center>
<br/><br/>
    <p class="counter">
        หน้าที่ 1 จาก 2            
    </p>



น่าจะมี CSS ตัวอื่นๆ บังคับชิดซ้ายอยู่ อาจจะต้องใช้ การเขียน Class ใหม่เข้ามาทับ


เพิ่ม class CSS ขึ้นมาดังนี้ค่ะ

โค้ด: เลือกทั้งหมด

.pagination-toolbar li{
     display: inline;
}
.pagination-toolbar>ul{
    list-style-type: none;
    display: inline-block;
}


ผลลัพธ์
15.jpg


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 31 และ บุคคลทั่วไป 0 ท่าน