html - リストアイテムを列の中央に配置する方法

Question

このテストブログの下部にページ番号を中央揃えにしようとしています...

http://jocelynwarner.com/test/

前のボタンと次のボタンの間の中央にありますが、その方法がわかりません。いくつかの異なるチュートリアルを試しましたが、実際には役に立たなかったようです。

それらを左側の列 (ブログ コンテンツの幅 - サイドバー) の中央に配置する方法についてのヒントをいただければ幸いです。

Answer 1

パブロはそれを正しく理解しています。これは、 を使用するとdisplay:inline-block物事が単純化される好例です。ところで、水平方向のリストが必要な場合にこれを使用することの長所と短所については、次の記事を参照してください 。

また、これは無関係ですが、あなたの説明によると、ページネーション div をコンテンツ列と同じサイズにする必要がありますよね? この場合、posts クラスと同じように、pagination クラスにwidthofを指定する必要がありますね。548px

Answer 2

inline-blockすべてのブラウザーで適切にサポートするために、Pablo の回答を拡張するには:

.pagination .third {
    /* Supports Firefox < 3.0, note
       that it is not 1:1 identical
       to inline-block but it is
       usually a good substitute */
    display: -moz-inline-box;

    /* Standards support */
    display: inline-block;

    /* IE 6 & 7 do not support
       inline-block for block-
       level elements; fortunately
       inline + hasLayout is exactly
       the same as inline-block in
       these browsers */
    *display: inline;
    *zoom: 1;
}

Answer 3

わざわざ、ページネーションのDivをコピー

<div class="pagination">
 <div class="third"></div>
 <div class="third">
  <ul class="page-numbers page-bright current-page-cyan behind-dark fill-gradient shape-  round">
   <li><span class="page-numbers current">1</span></li>
   <li><a href="http://jocelynwarner.com/test/page/2/" class="page-numbers">2</a></li>
   <li><a href="http://jocelynwarner.com/test/page/3/" class="page-numbers">3</a></li>
   <li><a href="http://jocelynwarner.com/test/page/4/" class="page-numbers">4</a></li>
  </ul>
 </div>
 <div class="third">
  <a href="http://jocelynwarner.com/test/page/2/">
   <p class="next">Next »</p>
  </a>
 </div>
</div>

中央揃えにする新しいスタイルは次のとおりです

    .pagination {
      border-top:1px dotted;
      float:left;
      font-size:12px;
      margin-top:10px;
      padding-top:10px;
      text-align:center;
      width:708px;
    }
    .pagination .third {
      display:inline-block;
    }
    ul.page-numbers {
      /*Clear all styles for this*/
    }

w3Schoolsで CSS リファレンスとチュートリアルを読むことをお勧めします