私はページネーションを実装していますが、それを中央に配置する必要があります。問題は、リンクをブロックとして表示する必要があるため、フロートさせる必要があることです。しかし、その後はtext-align: center;機能しません。leftのラッパーdivパディングを指定することでそれを実現できますが、すべてのページに異なる数のページが含まれるため、機能しません。これが私のコードです：

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

アイデアを得るために、私が欲しいもの：

を削除floatして使用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からの引用：

インラインブロックはインラインで（つまり、隣接するコンテンツと同じ行に）配置されますが、ブロックとして動作します。

これはしばしばフロートを効果的に置き換えることができます：

この値の実際の用途は、インライン要素に幅を指定する場合です。状況によっては、一部のブラウザーでは実際のインライン要素の幅を許可していませんが、display：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>

重要なのは、コンテンツに応じてコンテナーに幅を変更させるために、floatを左に与えることです。Thanは位置の問題です。相対的で、2つのコンテナーに50％と-50％残っています。

良いことは、これはクロスブラウザであり、IE7 +で動作するはずです。

フロートのセンタリングは簡単です。コンテナーのスタイルを使用するだけです：

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

フローティング要素のマージンを変更します。

.pagination a{ margin: 0 2px; }

または

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

残りはそのままにしておきます。

メニューやページネーションのようなものを表示することが、私にとって最良の解決策です。

強み：

• 任意の要素（ブロック、リスト項目など）のクロスブラウザ

• シンプルさ

弱点：

• すべてのフローティング要素が1行にある場合にのみ機能します（通常、メニューでは問題ありませんが、ギャラリーでは問題ありません）。

@ arnaud576875 ページ付けにはアンカー（インライン）のみが含まれ、リスト項目やdivは含まれないため、この場合はインラインブロック要素を使用すると（クロスブラウザー）うまく機能します。

強み：

• 複数行のアイテムで機能します。

湿気：

• インラインブロック要素間のギャップ -単語間のスペースと同じように機能します。コンテナーの幅とスタイリングマージンの計算で問題が発生する可能性があります。ギャップ幅は一定ではありませんが、ブラウザ固有です（4〜5ピクセル）。このギャップを取り除くために、私はarnaud576875コードに追加します（完全にはテストされていません）。

  .pagination {word-spacing：-1em; }

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

• IE6 / 7ではブロック要素とリスト項目要素では機能しません

あなたのコンテナの設定してwidth中をpxして追加します。

margin: 0 auto;

リファレンス。

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

margin代わりにを使用するのが最善の方法だと思いますdisplay。

すなわち：

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

IE7は知りませんinline-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」を、left、transform、および状況に応じて位置のcssの2〜3行に置き換えます。

.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

必要な2つ以上のdivを作成し、それぞれに100pxのような明確な幅を与え、それを左または右にフロートします

ステップ2

次に、これらの2つのdivを別のdivにワープし、幅を200pxにします。このdivにマージン自動を適用します。ブームはかなりうまくいきます。上記の例を確認してください。

追加するだけ

left:15%; 

私のCSSメニューに

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

センタリングのトリックもしました