CSS 如何在 span 中居中文字

在本文中，我们将介绍如何使用CSS来实现在一个span元素中居中文字的效果。

阅读更多：CSS 教程

方法一：使用text-align属性

一种简单的方法是使用CSS的text-align属性。我们可以将span元素的display属性设置为block，并将其父元素的text-align属性设置为center来实现居中的效果。

<style>
    .center-text {
        display: block;
        text-align: center;
    }
</style>

<p>在span元素中的居中文字：</p>
<span class="center-text">这是居中的文字</span>

方法二：使用line-height属性

另一种方法是使用CSS的line-height属性。我们可以将line-height属性的值设置为与span元素的高度相等，这样文字就会在垂直方向上居中。

<style>
    .center-text {
        display: inline-block;
        line-height: 50px;
        height: 50px;
    }
</style>

<p>在span元素中的居中文字：</p>
<span class="center-text">这是居中的文字</span>

方法三：使用flex布局

还有一种方法是使用CSS的flex布局。我们可以将span元素的父元素设置为flex容器，并使用align-items属性将子元素在交叉轴上居中对齐。

<style>
    .flex-container {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
    }

    .center-text {
        display: inline-block;
    }
</style>

<div class="flex-container">
    <span class="center-text">这是居中的文字</span>
</div>