html – 中心对齐div中的“span”文本

我有一个HTML代码

<div class="left">
<span class="panelTitleTxt">Title text</span>
</div>

我的CSS如下

.left {
    background-color: #999999;
    height: 50px;
    width: 24.5%;
}
span.panelTitleTxt {
                display: block;
                width: 100%;
                height: 100%;
}

现在我如何对齐div中的span文本？ (假设％转换后的“左”div的像素宽度为100像素)

我尝试使用margin：auto的标准方式，但是这不行。

我也想避免使用text-align：center。

还有其他一些修复方法吗？

解决方法

您将跨度的宽度设为100％，使其扩展到父级的大小。这意味着你不能对齐它，因为没有空间来移动它。

您可以将span设置为宽度，然后再次添加margin：0 auto。这将对齐它。

.left 
{
   background-color: #999999;
   height: 50px;
   width: 24.5%;
}
span.panelTitleTxt 
{
   display:block;
   width:100px;
   height: 100%;
   margin: 0 auto;
}