居中对齐div中的"span"文本

Question

我有一个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文本居中对齐？(假设%转换后的"left"div的px宽度为100px)

我尝试了标准的使用方式margin:auto,但这不起作用.

我也想避免使用text-align:center.

有没有其他方法来解决这个问题？

Answer 1

您给出了100%宽度的跨度,从而扩展到父级的大小.这意味着您无法对齐它,因为没有移动空间.

您可以为跨度设置一个宽度,然后margin:0 auto再次添加.这将使它居中对齐.

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