div内のブロックレベルのリンクを中央に配置する方法

Question

これは非常にシンプルなようですが、何らかの理由でこれに苦しんでいます。 jQueryのコンテンツスライダを制御するリンクがいくつかあります。リンクはスライダの中央に配置する必要があります。リンクのテキストは、使用しているjQueryプラグインを介して設定されていますので、代わりにtext-indent: -9999pxを使用して背景画像を表示してください。各リンクはブロックに設定され、幅は10px、高さは10pxです。しかし、私はそれらをdivの中に集中させることはできません。ここに私がしたいことの少しの図があります。

| ••                                                                       •          |

3つの記号は、私が中心にしたいリンクを表しています。私は2つのリンクまたは10のリンクを持っているかどうかにかかわらず、それらを中心にしたい。私は固定幅の親を作成し、それにmargin:0 auto;を使用することができるので、私はリンクの設定数を持っていた場合、これはおそらくもっと簡単だろう。

ここに私のコードだ、これまで...

HTML ..

<div id="pager"> 
    <a href="#slide1">1</a> 
    <a href="#slide2">2</a> 
    <a href="#slide3">3</a> 
</div> 

CSS ..

#pager {float:left; width:100%; display: block; text-align: center;} 

#pager a {display:block; width:10px; height:10px; float:left; background-image: url(img/pager-off.gif); text-indent: -9999px; background-color: red; background-repeat: no-repeat;} 

Answer 1

チェックアウトこのjsfiddle

http://jsfiddle.net/h2r6c/

リンクにマージンを追加しました。開始点と終了点を確認するだけです。 それ以外では、あなたのリンクCSSのfloat:leftを取り除いてください。ブロックレベルでなければ、あなたはいいですね。彼らはあなたが好きなように横に並ぶようにdisplay:inline-blockにする必要があります。

Answer 2

中央にある場合は、それぞれの中央がコンテナの中央に配置されているため、上下に積み重ねられていることを意味します。そして、キーは余裕がある：自動

#pager a { 
    display:block; 
    width:10px; height:10px; 
    margin:auto 
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat; 
} 

、しかし、あなたは各リンクを意味しているサイドバイサイド、と彼らは、ディスプレイを使用して、コンテナの中央にセットとして集中している場合：インラインテキストの整列でリンク上にブロック：

#pager a { 
    display:inline-block; 
    width:10px; height:10px; 
    background-image: url(img/pager-off.gif); 
    background-color: red; 
    background-repeat: no-repeat; 
} 
#pager{ 
    text-align:center; 

Answer 3

私はこれが欲しいですか？

http://jsfiddle.net/oswaldoacauan/phXvv/