将 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 文本？ （假设%转换后的“左”div得到100px的px宽度）

我尝试了使用margin:auto 的标准方式，但不起作用。

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

还有其他方法可以解决这个问题吗？

Answer 1

如果您知道跨度的宽度，您可以在左边距中填充。

试试这个：

.center { 文本对齐：居中}
div.center span { 显示：表格； }

将“center: 类”添加到您的 .

如果您希望某些跨度居中，但不希望其他跨度居中，请将样式表中的“div.center span”替换为一个类（例如“center-span”）并将该类添加到该跨度中。

Answer 2

您将跨度设置为 100% 的宽度，从而使其扩展到父级的大小。这意味着您无法将其居中对齐，因为没有移动它的空间。

您可以给跨度设置一个宽度，然后再次添加margin:0 auto。这将使其居中对齐。

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