Question

.nivo-controlNav确实在滑块内居中，但我无法将.nivo-controlNav span置于.nivo-controlNav内。

代码检查员：

enter image description here

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

修改（我设法使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 a设置为float: left;的CSS类，可能会覆盖课程text-align: center上的.nivo-controlNav span

编辑：要完成您所追求的目标，请尝试使用一个父 ul 和一个 li 元素替换您的 span 元素现在跨度。然后将以下内容添加到CSS中并继续在元素上使用float：left。

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

如果不清楚，请告诉我，我会尝试设置一个示例。

滑块内的<span>元素无法居中？</span>

2 个答案: