1

これは非常に単純に見えるかもしれませんが、何らかの理由で私はこれに苦労しています。jQueryコンテンツスライダーを制御するリンクがいくつかあります。リンクはスライダーの下部の中央に配置する必要があります。text-indent: -9999pxリンクのテキストは、使用しているjQueryプラグインを介して設定されるため、リンクを非表示にして、代わりに背景画像を表示するために使用します。各リンクはブロックに設定され、幅と高さは10ピクセルです。ただし、それらを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;}
4

3 に答える 3

2

これ欲しい？

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

于 2012-04-20T19:35:35.040 に答える
1

このjsfiddleをチェックしてください

http://jsfiddle.net/h2r6c/

リンクにマージンを追加したので、リンクの開始位置と終了位置を確認してください。それとは別に、float:leftリンクCSSを削除すれば、ブロックレベルでなければ問題ありません。彼らはdisplay:inline-blockあなたが望むように並んでいる必要があります。

于 2012-04-20T19:33:55.727 に答える
1

中央揃えとは、それぞれがコンテナの中央に中央揃えされ、したがって互いに積み重ねられていることを意味する場合は、浮かないでください。そして重要なのはmargin：autoです

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

ただし、各リンクが並んでいて、コンテナの中央にセットとして中央に配置されている場合は、リンクにdisplay：inline-blockを使用し、text-align：centerを使用します。容器：

#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;
于 2012-04-20T19:34:05.537 に答える