<span>スライダの内部にある要素は、中央に配置できません。

Question

.nivo-controlNavはスライダの中に中心を置いていますが、.nivo-controlNav spanは.nivo-controlNavの中に集中できません。

コードインスペクタ：

.nivo-controlNav { 
    margin: 0 auto; 
    text-align: center; 
    width: 200px; 
} 
.nivo-controlNav span { 
    text-align: center; 
} 
.nivo-controlNav a { 
    display: block; 
    float: left; 
    width: 22px; 
    height: 22px; 
    background: url(images/bullets.png) no-repeat; 
    text-indent: -9999px; 
    border: 0; 
    margin-right: 3px; 
    margin: 0 auto; 
} 
.nivo-controlNav a.active { 
    background-position: 0 -22px; 
} 
.nivo-directionNav a { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background: url(images/arrows.png) no-repeat; 
    text-indent: -9999px; 
    border: 0; 
} 
a.nivo-nextNav { 
    background-position: -30px 0; 
    right: 15px; 
} 
a.nivo-prevNav { 
    left: 15px; 
} 
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
} 
.shadow-top { 
    height: 10px; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#111), to(#333)); 
    background: -moz-linear-gradient(#111, #333); 
    -pie-background: linear-gradient(#111, #333); 
} 
.shadow-bottom { 
    height: 10px; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333), to(#111)); 
    background: -moz-linear-gradient(#333, #111); 
    -pie-background: linear-gradient(#333, #111); 
} 
.shadow-slider { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 940px; 
    height: 10px; 
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#999), to(#FFF)); 
    background: -moz-linear-gradient(#999, #DDD); 
    -pie-background: linear-gradient(#222, #000); 
} 
#slider img { 
    float: left; 
    width: 958px; 
    height: 458px; 
} 

EDIT： （私はdiv要素を中央に管理しますが、左側のフローティングされていないため、今.nivo-controlNav aは、その幅と高さを失います）。

これを解決するにはどうすればよいですか？

#slider-wrapper { 
    float: left; 
    height: 500px; 
} 
#slider { 
    float: left; 
    border: 1px solid #DDD; 
    position:relative; 
    background:url(images/loading.gif) no-repeat 50% 50%; 
} 
#slider img { 
    position:absolute; 
    top: 0px; 
    left: 0px; 
    display: none; 
} 
.nivo-controlNav { 
    margin: 480px auto 0; 
    overflow: hidden; 
    text-align: center; 
    width: 200px; 
} 
.nivo-controlNav span { 

} 
.nivo-controlNav a { 
    width: 22px; 
    height: 22px; 
    background: url(images/bullets.png) no-repeat; 
    text-indent: -9999px; 
    border: 0; 
    margin-right: 3px; 
} 
.nivo-controlNav a.active { 
    background-position: 0 -22px; 
} 
.nivo-directionNav a { 
    display: block; 
    width: 30px; 
    height: 30px; 
    background: url(images/arrows.png) no-repeat; 
    text-indent: -9999px; 
    border: 0; 
} 
a.nivo-nextNav { 
    background-position: -30px 0; 
    right: 15px; 
} 
a.nivo-prevNav { 
    left: 15px; 
} 
.nivo-caption { 
    text-shadow:none; 
    font-family: Helvetica, Arial, sans-serif; 
} 
.nivo-caption a { 
    color:#efe9d1; 
    text-decoration:underline; 
} 

Answer 1

は、私はあなただけ使って、それを達成することができると思う：

.nivo-controlNav span { 
    display: inline-block; 
} 

それが問題を引き起こす可能性がありますように私もリンクからfloat:leftを削除します。幅を持たせるには、リンク上にdisplay:blockが必要です。

Answer 2

あなたはおそらくクラス.nivo-controlNav span

編集しますtext-align: centerをオーバーライドしているfloat: left;から.nivo-controlNav aセットのためのCSSクラスがあります：1であなたのスパンの要素を交換してみてください、あなたは後にしているものを達成するためには親ulとlここではスパンがある場所です。次に、あなたのCSSに次の行を追加して、a要素の上にfloat：leftを続けます。

.nivo-controlNav li { 
    text-align: center; 
    list-style: none; 
} 

これが明確でない場合はお知らせください。例を設定します。