css span左右居中

CSS span左右居中是我们在页面设计中经常需要操作的，下面让我们来学习一下如何实现它。

<style>
    span {
        display: inline-block;
        width: 100px;
        text-align: center;
        margin: 0 auto;
    }
</style>

首先我们需要给span设置display: inline-block;，这样才能让它在一行内占据宽度，同时也能对其它元素产生影响。

然后我们设置width: 100px;，让span拥有一个明确的宽度。

下一步，我们让文本在span内居中，这时候就需要使用text-align: center;。

最后一步是让span在其父元素中居中，这时我们可以设置margin: 0 auto;，让左右margin都为auto，从而在父元素中水平居中。

通过上面的步骤，我们就可以轻松地实现CSS span左右居中。当然，根据实际需求还可以进行微调，比如设置padding、border等。