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文本居中对齐？（假设％转换后的＆＃34;左＆＃34; 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;
}

Answer 2

如果你知道跨度的宽度，你可以在左边缘填充。

试试这个：

.center {text-align：center}
div.center span {display：table; }

将“center：class”添加到您的。

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

居中对齐div中的“span”文本

2 个答案: