<span> elements inside a slider that are impossible to center? - css

Question

.nivo-controlNav does center itself inside the slider, but i can't get to center .nivo-controlNav span inside .nivo-controlNav.
code inspector:
.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:
(I managed to center the div, but now .nivo-controlNav a loses its width and height because is not floating left).
How to solve this?
#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

I think you can achieve that by just using:
.nivo-controlNav span {
display: inline-block;
}
I would also remove the float:left from the link as that can cause problems. You do need display:block on the link in order to be able to give it a width.

Answer 2

You have a CSS class for .nivo-controlNav a set to float: left; which is likely overriding your text-align: center on the class .nivo-controlNav span
EDIT: To accomplish what you're after, try replacing your span elements with one parent ul and an li element where you have the spans now. Then add the following to your CSS and continue using float: left on your a elements.
.nivo-controlNav li {
text-align: center;
list-style: none;
}
Let me know if this isn't clear and I'll try to setup an example.