Sayfalandırmayı uyguluyorum ve ortalanması gerekiyor. Sorun, bağlantıların blok olarak görüntülenmesi, bu yüzden kayan olması gerektiğidir. Ama sonra, text-align: center;onlar üzerinde çalışmaz. Ben sol sarmalayıcı div dolgu vererek bunu başardı, ama her sayfa farklı sayıda sayfa olacak, bu yüzden işe yaramaz. İşte benim kod:

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

Fikir almak için ne istiyorum:

Leri kaldırmak floatve kullanmak inline-blocksorunlarınızı çözebilir:

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

(ile başlayan satırları kaldırın ve ile başlayan satırları -ekleyin +.)

.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 öğe orijinal olarak satır içi bir öğe olduğu sürece IE6'da bile çapraz tarayıcıda çalışır.

Quirksmode'dan alıntı :

Satır içi bir blok satır içine yerleştirilir (yani bitişik içerikle aynı satıra), ancak bir blok gibi davranır.

bu genellikle şamandıraların yerini alabilir:

Bu değerin gerçek kullanımı, satır içi öğeye genişlik vermek istediğiniz zamandır. Bazı durumlarda bazı tarayıcılar gerçek bir satır içi öğede genişliğe izin vermez, ancak görüntülemeye geçerseniz: satır içi blok bir genişlik ayarlamanıza izin verilir. ” ( http://www.quirksmode.org/css/display.html#inlineblock ).

Gönderen W3C spec :

[satır içi blok] bir öğenin satır içi seviye blok kabı oluşturmasına neden olur. Satır içi bir bloğun içi bir blok kutusu olarak biçimlendirilir ve elemanın kendisi atomik bir satır içi seviye kutusu olarak biçimlendirilir.

Uzun yıllar boyunca bazı bloglarda öğrendiğim eski bir numara kullanıyorum, üzgünüm ona kredi vermek için adını hatırlamıyorum.

Yine de kayan elemanları ortalamak için bu işe yaramalıdır:

Bunun gibi bir yapıya ihtiyacınız var:

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

hile, konteynerin içeriğe bağlı olarak genişliği değiştirmesini sağlamak için kayan nokta bırakıyor. Bundan daha fazla bir konum söz konusudur: göreli ve iki kapta% 50 ve% -50 sol.

İyi olan şey, bu çapraz tarayıcı ve IE7 + 'dan çalışması gerektiğidir.

Şamandıraların merkezlenmesi kolaydır . Konteyner için stili kullanın:

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

kayan elemanların kenar boşluğunu değiştirin:

.pagination a{ margin: 0 2px; }

veya

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

ve gerisini olduğu gibi bırakın.

Menüler veya sayfalandırma gibi şeyleri göstermek benim için en iyi çözüm.

Güçlü:

• herhangi bir öğe için çapraz tarayıcı (bloklar, liste öğeleri vb.)

• basitlik

Zayıf yönleri:

• yalnızca tüm kayan elemanlar bir satırdayken çalışır (genellikle menüler için uygundur, ancak galeriler için uygun değildir).

@ arnaud576875 Sayfa içi blok öğelerini kullanmak , sayfalandırma yalnızca bağlantı (satır içi) içerdiğinden, liste öğeleri veya div içermediğinden bu durumda harika (çapraz tarayıcı) çalışır:

Güçlü:

• çok satırlı öğeler için çalışır.

Weknesses:

• satır içi blok elemanları arasındaki boşluklar - kelimeler arasındaki boşlukla aynı şekilde çalışır. Kabın genişliğini ve şekillendirme kenar boşluklarını hesaplarken bazı sorunlara neden olabilir. Boşluk genişliği sabit değil, tarayıcıya özel (4-5 piksel). Bu boşluklardan kurtulmak için arnaud576875 koduna ekleyeceğim (tam olarak test edilmedi):

  .pagination {kelime aralığı: -1em; }

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

• IE6 / 7'de blok ve liste öğeleri öğelerinde çalışmaz

Konteynerinizi widthyerleştirin pxve ekleyin:

margin: 0 auto;

Referans .

Flex'i kullanma

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

Bence bunun marginyerine en iyi yol kullanmak display.

yani:

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

Sonucu ve kodu kontrol edin:

http://cssdeck.com/labs/d9d6ydif

text-align: center;
float: none;

IE7 bilmiyor inline-block. Eklemelisiniz:

display:inline;
zoom: 1;

Bunu stilinize ekleyin

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

* Konteynır genişliğiniz 50px ise 25px, 10em ise 5em koyun.

Bunu, .pagination"metin hizalama: merkez" i sola, dönüştürmeye ve koşullara bağlı olarak konum için iki ila üç css satırı ile değiştirerek de yapabilirsiniz .

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

Aşama 1

İstediğiniz iki veya daha fazla div oluşturun ve her biri için 100 piksel gibi belirli bir genişlik sağlayın, ardından sola veya sağa kaydırın

Adım 2

daha sonra bu iki div'i başka bir div'de bükün ve 200px genişlik verin. bu div kenar boşluğu auto uygulayın. Boom oldukça iyi çalışıyor. yukarıdaki örneği inceleyin.

Sadece ekliyorum

left:15%; 

benim css menüme

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

merkezleme hile yaptı mı