<span>滑块内的元素不可能居中？

Question

.nivo-controlNav确实在滑块内部居中，但我无法到达.nivo-controlNav中的.nivo-controlNav span中心。

代码检查：

.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; 
} 

编辑： （我设法中心股利，但现在.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 a集的CSS类float: left;这是有可能的类.nivo-controlNav span

编辑重写你的text-align: center：要做到你以后，尝试用一个替换您跨度元素父母ul和li元素现在您有跨度。然后将以下内容添加到CSS中，并继续在您的a元素上使用float：left。

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

让我知道如果这不明确，我会尝试设置一个例子。