如何將<span>的背景放置到中心？

Question

我創建了一個滑塊搜索器，但似乎無法讓它到達div的中心。我用span並保持background-image作爲尋求者的形象。我如何將位置設置爲中心。有沒有其他好的方法來實現這一點。

<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

溶液1

創建包裝div來包含導引頭按鈕和集中包裝：http://jsfiddle.net/pwLsb290/

溶液2

上失主應用display: inline-block;按鈕，並擺脫float屬性。 （這種方法的問題是inline-block元素相關的空格。） http://jsfiddle.net/26dk1zeL/

Answer 2

用於這個CSS添加.position-imagedisplay:inline-block財產和刪除float: left;像這樣

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

=========== 第二個選項是

Demo 用於此

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

Answer 3

見fiddle

CSS：

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