如何定位<span>以背景为中心

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

本文关键字：gt span 背景 为中心 何定位 lt 定位      更新时间：2023-09-26

我创建了一个滑块导引头，但似乎无法将其放在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/

解决方案1

创建一个包含seeker按钮的包装器div，并集中包装器：http://jsfiddle.net/pwLsb290/

解决方案2

在导引头按钮上应用display: inline-block;，并去掉float属性。（此方法的问题是与inline-block元素相关联的空白。）http://jsfiddle.net/26dk1zeL/

用于此css，添加您的.position-image display:inline-block属性并删除float: left;，如下所示

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

=============第二个选项是

演示习惯了这个

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

查看fiddle

CSS：

.slider-seeker a{
 margin:0px auto;
}
.position-image {
 display:inline-table;
}
相关文章：