<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

У вас есть класс CSS для .nivo-controlNav a набора для float: left; который, скорее всего, подменяют text-align: center на классе .nivo-controlNav span

EDIT: Для того, чтобы сделать то, что вы после этого, попробуйте заменить ваш SPAN элементов с одним родительский ul и li элемент, в котором у вас есть пролеты. Затем добавьте следующее в свой CSS и продолжайте использовать float: слева от ваших элементов.

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

Дайте мне знать, если это неясно, и я попытаюсь установить пример.