div内のいくつかのアイテムのセンタリング

Question

私はナビゲーションの一部のセンタリングに問題があります。ここでは、マークアップ構造です：

<div id="pagination_navigation"> 
    <a href="#" class="first">First</a> 
    <a href="#" class="page_item">1</a> 
    <a href="#" class="page_item active_item">2</a> 
    <a href="#" class="last">Last</a> 
</div> 

そして、ここでは、関連するCSSです：

#pagination_navigation { 
    text-align: center; 
} 
#pagination_navigation .first { 
    float: left; 
} 
#pagination_navigation .last { 
    float:right; 
} 
#pagination_navigation .page_item { 
    display: inline; 
    width: 6px; 
    height: 10px; 
    text-indent: -9999px; 
    white-space: nowrap; 
    background: url(fancyimage.png) no-repeat; 
} 

は基本的に私は、すべてのpage_itemsが互いの間に小さなマージンを中心にしたいと最初と最後のリンクはする必要がありますそれぞれの側に。最初は、div内のすべてのpage_itemをラップし、マージンを使用して中央に配置しました：0 auto; Javascriptではこの正確な構造が必要であるため、マークアップ構造は変更できません。

上記のCSSを使用すると、page_itemは中央に配置されますが、text-indent：-9999px;動作しないので、テキストはまだそこにある（私は欲しくない）。どのように私はテキストを取り除くことができますが、リンクとセンタリングを維持する上の任意のアイデア？

Answer 1

あなたのCSSにpage_itemより前にドットが欠落しているようです。

これは、CSSターゲティング#pagination_navigation page_itemがどの要素にも影響しないことを意味します。何をしたい

は次のとおりです。

#pagination_navigation .page_item { 
    display: inline; 
    width: 6px; 
    height: 10px; 
    text-indent: -9999px; 
    white-space: nowrap; 
    background: url(fancyimage.png) no-repeat; 
} 

page_itemの前にドットを使用して、クラス名に参照のうえしていることを示しています。ドットなしでは、あなたはpage_itemという名前の要素を参照しています。

また、インラインレベルの要素でtext-indentを使用することはできません。これをinline-blockに変更すると、問題が解決されます。

ここでデモです：http://jsfiddle.net/wBreU/1/

Answer 2

変更この行：これに

#pagination_navigation page_item { 

：

#pagination_navigation .page_item { 

そして、物事が良く作業を開始する必要があります！

「ディスプレイ：インラインブロック;」を使用することもできます。 「display：inline」の代わりに使用します。それはあなたが必要とするものでなければなりません。