如何将<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-image display: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;
}