中心对准“跨度”文本里面的div [英] Center align "span" text inside a div

问题描述

我有一个HTML代码：

I have a HTML code as;

<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%;
}

现在如何在span内居中对齐span文本？ （假设％转换后的左div的像素宽度为100像素）

Now how do I center align the span text inside the div? (Assume that the "left" div after the % conversion gets a px width of 100px)

我尝试使用 margin：auto ，但这不起作用。

I tried the standard way of using margin:auto, but that is not working.

同样，我想避免使用 text-align：center 。

有没有其他方法修复这个？

Is there some other way of fixing this?

推荐答案

您将跨度设置为100％宽度，从而将其展开为父级的大小。这意味着你不能center-align它，因为没有空间来移动它。

You are giving the span a 100% width resulting in it expanding to the size of the parent. This means you can’t center-align it, as there is no room to move it.

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

You could give the span a set width, then add the margin:0 auto again. This would center-align it.

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

这篇关于中心对准“跨度”文本里面的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！