how to position the <span> with background to the center?

Question

I created a slider seeker but cant seem to get it to the center of the div. I used span and kept the background-image as the seeker image. How do I set the position to the center. Is there any other good method to implement this.

   <div class="slider-seeker">
     <a href="#"><span class="position-image active"></span></a>
     <a href="#"><span class="position-image"></span></a>
     <a href="#"><span class="position-image"></span></a>
     <a href="#"><span class="position-image"></span></a>
    </div>

http://jsfiddle.net/j1bnbf3q/

Answer 1

Solution 1

Create a wrapper div to contain the seeker buttons, and centralize the wrapper: http://jsfiddle.net/pwLsb290/

Solution 2

Apply display: inline-block; on the seeker buttons, and get rid of the float property. (The problem with this method is the whitespace associated with inline-block elements.) http://jsfiddle.net/26dk1zeL/

Answer 2

Used to this css add your .position-image display:inline-block property and remove float: left; as like this

.position-image{
    /* float: left; */  // remove this
    display: inline-block;  // add this
    vertical-align: top;   // add this 
}

=========== 2nd option is

Demo used to this

.slider-seeker > a {
    display: inline-block;
    vertical-align: top;
}

Answer 3

See fiddle

CSS:

.slider-seeker a{
 margin:0px auto;
}
.position-image {
 display:inline-table;
}