CSS - 无法获得一种跨度样式来覆盖另一种继承样式并左对齐

Question

我有一个 div 分类内容。

在 div 内，是一个 h1 标签。

h1 标签内是一个 span 标签，其类设置为 regTalker。

这是标签:

<h1><span class="regTalker">Not Listed? Register <a href="?register">here</a></span>Browse Listings</h1>

regTalker 类如下所示:

.regTalker {
    text-align: left !important;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

容器 div 的 text-align 值设置为居中。

h1 标签内的主字符串居中显示。

span 标签内的字符串也是居中的，而不是左对齐，因为我认为它是......

什么给了？当然 !important 应该覆盖内容 div text-align 值？

有两个不同的 css 文件，主要文件和次要文件，其中包含 regTalker 类...这些文件一个接一个地链接，所以万一出现在答案中，它不是由于包含的实例。

我还清除了缓存并直接重新加载了 css 文件。所以也不是那样。

我使用的是 firefox 8.0.1，还没有在其他浏览器上尝试过。

如果有人对此问题有任何建议或意见，或者如何解决问题，将不胜感激，谢谢!

Answer 1

text-align 应用于它所应用的元素的内容，而不是元素本身。跨度内的文本是左对齐的，但跨度本身在其父级中是居中对齐的。由于 span 是一个内联级别元素，它的宽度仅与其内容一样宽，并且由于 span 是居中对齐的，因此其内容也将显示为居中对齐...

如果跨度与其容器一样宽，那么其中的文本将显示为左对齐，但您必须应用 display: block 或 display: inline-block 给它，然后才能为其分配宽度。

此外，切勿使用 !important。从长远来看，这只会导致流泪和咬牙切齿。