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

我有一个HTML代码为;居中对齐div中的“span”文本

<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的像素宽度）

我试过使用margin:auto的标准方式，但那不起作用。我想避免使用text-align:center。

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

来源

2011-10-25 testndtv

如果您不介意我询问，为什么要避免使用”text-align：center“？ –

如果要对齐span的文本，请使用'span {text-align：center;}'。如果这不会产生你想要的输出，你将不得不解释为什么我们能够帮助你（否则我们只需要猜测你的实际要求是）。 –

如果是一个_title_，使用适当的标签（h1，h2，h31 h4，h5或h6），不要使用非语义。 – Kyle

您给予跨度100％的宽度，导致它扩展到父级的大小。这意味着你不能居中对齐它，因为没有空间来移动它。

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

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

来源

2011-10-25 08:29:56 Lee

您无法指定内联元素的宽度（例如'span'）：http://stackoverflow.com/a/621406/343204 – Snowcrash

您也可以在更改块元素时使用它。 – Lee

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

尝试这种情况：

.center {文本对齐：中心}
div.center跨度{显示：表; “在你的样式表类（如‘div.center跨度中心：}

添加’类的

如果你想要一些跨度为中心，但不是别人，更换中心”。 -span“），并将该类添加到跨度中

来源

2013-10-02 15:59:10 Cuse70

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

回答

相关问题