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

发布时间：2020-12-14 21:43:26 所属栏目：资源来源：网络整理

导读：我有一个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中

我有一个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;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!