ฉันใช้เลขหน้าและมันจะต้องเป็นศูนย์กลาง ปัญหาคือการเชื่อมโยงจะต้องแสดงเป็นบล็อกจึงต้องลอย แต่text-align: center;ไม่สามารถใช้งานได้ ฉันสามารถทำได้โดยการให้ส่วนหุ้มของ divpper ของด้านซ้าย แต่ทุกหน้าจะมีจำนวนหน้าที่แตกต่างกันดังนั้นมันจะไม่ทำงาน นี่คือรหัสของฉัน:

.pagination {
  text-align: center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

เพื่อให้ได้ความคิดสิ่งที่ฉันต้องการ:

การลบfloats และการใช้inline-blockอาจช่วยแก้ปัญหาของคุณได้:

 .pagination a {
-    display: block;
+    display: inline-block;
     width: 30px;
     height: 30px;
-    float: left;
     margin-left: 3px;
     background: url(/images/structure/pagination-button.png);
 }

(ลบบรรทัดที่ขึ้นต้นด้วย-และเพิ่มบรรทัดที่ขึ้นต้นด้วย+)

.pagination {
  text-align: center;
}
.pagination a {
  + display: inline-block;
  width: 30px;
  height: 30px;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

inline-block ทำงานข้ามเบราว์เซอร์แม้ใน IE6 ตราบใดที่องค์ประกอบเดิมเป็นองค์ประกอบอินไลน์

อ้างอิงจากquirksmode :

บล็อกแบบอินไลน์จะถูกวางแบบอินไลน์ (เช่นในบรรทัดเดียวกันกับเนื้อหาที่อยู่ติดกัน) แต่มันจะทำงานเป็นบล็อก

สิ่งนี้มักจะสามารถแทนที่ลอยได้อย่างมีประสิทธิภาพ:

การใช้งานจริงของค่านี้คือเมื่อคุณต้องการให้องค์ประกอบอินไลน์มีความกว้าง ในบางสถานการณ์เบราว์เซอร์บางตัวไม่อนุญาตให้มีความกว้างขององค์ประกอบอินไลน์จริง แต่ถ้าคุณสลับไปแสดง: inline-block คุณจะได้รับอนุญาตให้ตั้งค่าความกว้าง” ( http://www.quirksmode.org/css/display.html#inlineblock )

จากสเป็ค W3C :

[inline-block] ทำให้องค์ประกอบในการสร้างภาชนะบล็อกระดับแบบอินไลน์ ด้านในของบล็อกแบบอินไลน์ถูกจัดรูปแบบเป็นกล่องบล็อกและองค์ประกอบนั้นถูกจัดรูปแบบเป็นกล่องแบบอินไลน์ระดับอะตอม

ตั้งแต่หลายปีที่ฉันใช้กลอุบายเก่า ๆ ที่ฉันได้เรียนรู้ในบางบล็อกฉันขอโทษฉันจำชื่อไม่ได้เพื่อให้เครดิตแก่เขา

อย่างไรก็ตามองค์ประกอบที่ลอยอยู่ตรงกลางควรทำงานดังนี้:

คุณต้องมีโครงสร้างดังนี้:

    .main-container {
      float: left;
      position: relative;
      left: 50%;
    }
    .fixer-container {
      float: left;
      position: relative;
      left: -50%;
    }

<div class="main-container">
  <div class="fixer-container">
    <ul class="list-of-floating-elements">

      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>
      <li class="floated">Floated element</li>

    </ul>
  </div>
</div>

เคล็ดลับคือการให้ลอยซ้ายเพื่อให้ภาชนะเปลี่ยนความกว้างขึ้นอยู่กับเนื้อหา กว่าเป็นเรื่องของตำแหน่ง: ญาติและซ้าย 50% และ -50% ในภาชนะสอง

สิ่งที่ดีคือมันเป็นเบราว์เซอร์ข้ามและควรทำงานได้จาก IE7 +

Centering ลอยเป็นเรื่องง่าย เพียงใช้สไตล์สำหรับคอนเทนเนอร์:

.pagination{ display: table; margin: 0 auto; }

เปลี่ยนระยะขอบสำหรับองค์ประกอบลอยตัว:

.pagination a{ margin: 0 2px; }

หรือ

.pagination a{ margin-left: 3px; }
.pagination a.first{ margin-left: 0; } 

และปล่อยให้ส่วนที่เหลือตามที่มันเป็น

มันเป็นทางออกที่ดีที่สุดสำหรับฉันที่จะแสดงสิ่งต่าง ๆ เช่นเมนูหรือเลขหน้า

จุดแข็ง:

• ข้ามเบราว์เซอร์สำหรับองค์ประกอบใด ๆ (บล็อกรายการ - รายการอื่น ๆ )

• ความง่าย

จุดอ่อน:

• มันทำงานได้เฉพาะเมื่อองค์ประกอบลอยตัวทั้งหมดอยู่ในหนึ่งบรรทัด (ซึ่งมักจะใช้ได้สำหรับเมนู แต่ไม่ได้สำหรับแกลเลอรี่)

@ arnaud576875 การใช้องค์ประกอบแบบอินไลน์บล็อกจะใช้งานได้ดี (ข้ามเบราว์เซอร์) ในกรณีนี้เนื่องจากเลขหน้ามีเพียงจุดยึด (อินไลน์) ไม่มีรายการหรือ divs:

จุดแข็ง:

• ใช้งานได้กับหลายรายการ

Weknesses:

• ช่องว่างระหว่างองค์ประกอบในบล็อก - มันทำงานในลักษณะเดียวกับช่องว่างระหว่างคำ มันอาจทำให้เกิดปัญหาในการคำนวณความกว้างของคอนเทนเนอร์และระยะขอบแต่ง ความกว้างของช่องว่างไม่คงที่ แต่เป็นเฉพาะเบราว์เซอร์ (4-5px) เพื่อกำจัดช่องว่างนี้ฉันจะเพิ่มรหัส arnaud576875 (ไม่ผ่านการทดสอบอย่างสมบูรณ์):

  .pagination {การเว้นวรรคคำ: -1em; }

  .pagination a {word-spacing: .1em; }

• มันจะไม่ทำงานใน IE6 / 7 ในองค์ประกอบของ block และ list-items

ตั้งค่าคอนเทนเนอร์ของคุณwidthในpxและเพิ่ม:

margin: 0 auto;

การอ้างอิง

ใช้เฟล็กซ์

.pagination {
  text-align: center;
  display:flex;
  justify-content:center;
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

ผมคิดว่าวิธีที่ดีที่สุดคือการใช้แทนmargindisplay

เช่น:

.pagination a {
    margin-left: auto;
    margin-right: auto;
    width: 30px;
    height: 30px;    
    background: url(/images/structure/pagination-button.png);
}

ตรวจสอบผลลัพธ์และรหัส:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7inline-blockไม่ทราบ คุณต้องเพิ่ม:

display:inline;
zoom: 1;

เพิ่มสิ่งนี้ให้คุณจัดแต่งทรงผม

position:relative;
float: left;
left: calc(50% - *half your container length here);

* ถ้าความกว้างคอนเทนเนอร์ของคุณคือ 50px ใส่ 25px ถ้าเป็น 10em ให้ใส่ 5em

คุณสามารถทำได้โดยเปลี่ยน.paginationโดยแทนที่ "text-align: center" ด้วย css สองถึงสามบรรทัดสำหรับซ้ายเปลี่ยนรูปและขึ้นอยู่กับสถานการณ์ตำแหน่ง

.pagination {
  left: 50%; /* left-align your element to center */
  transform: translateX(-50%); /* offset left by half the width of your element */
  position: absolute; /* use or dont' use depending on element parent */
}
.pagination a {
  display: block;
  width: 30px;
  height: 30px;
  float: left;
  margin-left: 3px;
  background: url(/images/structure/pagination-button.png);
}
.pagination a.last {
  width: 90px;
  background: url(/images/structure/pagination-button-last.png);
}
.pagination a.first {
  width: 60px;
  background: url(/images/structure/pagination-button-first.png);
}

<div class='pagination'>
  <a class='first' href='#'>First</a>
  <a href='#'>1</a>
  <a href='#'>2</a>
  <a href='#'>3</a>
  <a class='last' href='#'>Last</a>
</div>
<!-- end: .pagination -->

<!DOCTYPE html>
<html>
<head>
    <title>float object center</title>
    <style type="text/css">
#warp{
    width:500px;
    margin:auto;
}
.ser{
width: 200px;
background-color: #ffffff;
display: block;
float: left;
margin-right: 50px;
}
.inim{
    width: 120px;
    margin-left: 40px;
}

    </style>
</head>
<body>



<div id="warp">
            <div class="ser">
              <img class="inim" src="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

              </div>
           <div class="ser">
             <img class="inim" sr`enter code here`c="http://123greetingsquotes.com/wp-content/uploads/2015/01/republic-day-parade-india-images-120x120.jpg">

             </div>
        </div>

</body>
</html>

ขั้นตอนที่ 1

สร้าง div สองตัวขึ้นไปที่คุณต้องการและกำหนดความกว้างที่แน่นอนเช่น 100px สำหรับแต่ละอันจากนั้นเลื่อนไปทางซ้ายหรือขวา

ขั้นตอนที่ 2

จากนั้นบิดส่วน div ทั้งสองนี้ในอีก div แล้วให้ความกว้าง 200px กับ div นี้ใช้ auto margin บูมมันใช้งานได้ดีทีเดียว ตรวจสอบตัวอย่างข้างต้น

เพียงแค่เพิ่ม

left:15%; 

ลงในเมนู css ของฉัน

#menu li {
float: left;
position:relative;
left: 15%;
list-style:none;
}

ทำเคล็ดลับอยู่ตรงกลางเกินไป