Saya menerapkan pagination, dan perlu dipusatkan. Masalahnya adalah bahwa tautan harus ditampilkan sebagai blok, sehingga tautan tersebut harus diapungkan. Tapi kemudian, text-align: center;tidak berhasil. Saya dapat mencapainya dengan memberikan lapisan pembungkus kiri, tetapi setiap halaman akan memiliki jumlah halaman yang berbeda, sehingga tidak akan berfungsi. Ini kode saya:

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

Untuk mendapatkan ide, apa yang saya inginkan:

Menghapus floats, dan menggunakan inline-blockdapat memperbaiki masalah Anda:

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

(hapus garis yang dimulai dengan -dan tambahkan garis yang dimulai dengan +.)

.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 berfungsi lintas-browser, bahkan pada IE6 selama elemen tersebut awalnya merupakan elemen inline.

Kutipan dari quirksmode :

Blok inline ditempatkan inline (mis. Pada baris yang sama dengan konten yang berdekatan), tetapi berperilaku sebagai blok.

ini sering dapat secara efektif menggantikan pelampung:

Penggunaan sebenarnya dari nilai ini adalah ketika Anda ingin memberikan elemen inline lebar. Dalam beberapa keadaan beberapa browser tidak mengizinkan lebar pada elemen inline nyata, tetapi jika Anda beralih ke tampilan: inline-block Anda diizinkan untuk mengatur lebar. " ( http://www.quirksmode.org/css/display.html#inlineblock ).

Dari spec W3C :

[inline-block] menyebabkan elemen untuk menghasilkan kontainer blok inline-level. Bagian dalam blok inline diformat sebagai kotak blok, dan elemen itu sendiri diformat sebagai kotak level inline atom.

Sejak bertahun-tahun saya menggunakan trik lama yang saya pelajari di beberapa blog, saya minta maaf saya tidak ingat nama untuk memberinya kredit.

Pokoknya untuk memusatkan elemen apung ini harus berfungsi:

Anda memerlukan struktur seperti ini:

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

Caranya adalah dengan mengapung ke kiri untuk membuat wadah mengubah lebar tergantung pada konten. Than adalah masalah posisi: relatif dan meninggalkan 50% dan -50% pada dua wadah.

Hal yang baik adalah bahwa ini adalah browser silang dan harus bekerja dari IE7 +.

Mengapung centering itu mudah . Cukup gunakan gaya untuk wadah:

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

ubah margin untuk elemen apung:

.pagination a{ margin: 0 2px; }

atau

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

dan biarkan sisanya apa adanya.

Ini solusi terbaik bagi saya untuk menampilkan hal-hal seperti menu atau pagination.

Kekuatan:

• lintas browser untuk elemen apa pun (blok, daftar-item, dll.)

• kesederhanaan

Kelemahan:

• ini hanya berfungsi ketika semua elemen mengambang berada dalam satu baris (yang biasanya ok untuk menu tetapi tidak untuk galeri).

@ arnaud576875 Menggunakan inline-block elemen akan bekerja dengan baik (lintas-browser) dalam hal ini karena pagination hanya berisi anchor (inline), tidak ada daftar-item atau div:

Kekuatan:

• berfungsi untuk item multiline.

Weknesses:

• kesenjangan antara elemen inline-blok - ia bekerja dengan cara yang sama seperti spasi di antara kata-kata. Ini dapat menyebabkan beberapa masalah menghitung lebar wadah dan margin gaya. Lebar celah tidak konstan tetapi khusus browser (4-5px). Untuk menghilangkan celah ini saya akan menambahkan kode arnaud576875 (tidak sepenuhnya diuji):

  .pagination {spasi-kata: -1em; }

  .pagination a {spasi-kata: .1em; }

• itu tidak akan berfungsi di IE6 / 7 pada elemen blok dan daftar-item

Mengatur kontainer Anda widthdi pxdan menambahkan:

margin: 0 auto;

Referensi .

Menggunakan Flex

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

Saya pikir cara terbaik menggunakan marginbukan display.

Yaitu:

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

Periksa hasil dan kode:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 tidak tahu inline-block. Anda harus menambahkan:

display:inline;
zoom: 1;

Tambahkan ini ke gaya kamu

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

* Jika lebar kontainer Anda adalah 50px, masukkan 25px, jika 10em, masukkan 5em.

Anda juga dapat melakukan ini dengan mengubah .paginationdengan mengganti "text-align: center" dengan dua hingga tiga baris css untuk kiri, mengubah dan, tergantung pada keadaan, posisi.

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

Langkah 1

buat dua atau lebih div yang Anda inginkan dan beri lebar yang pasti seperti 100px untuk masing-masing lalu apungkan ke kiri atau kanan

Langkah 2

lalu warp kedua div ini di div lain dan berikan lebar 200px. untuk div ini terapkan margin otomatis. booming itu bekerja dengan cukup baik. periksa contoh di atas.

Hanya menambahkan

left:15%; 

ke menu css saya dari

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

melakukan trik pemusatan juga