CSS - 无法获得一个跨越样式以覆盖另一个继承的样式并向左对齐

时间:2012-01-09 17:13:19

标签: css class override

我有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的{​​{1}}值设置为居中。

text-align标记内的主要字符串显示为居中。

h1标签内的字符串也是居中的,没有与左边对齐,因为我认为它是......

是什么给出的?当然span应该覆盖内容!important div值?

有两个不同的css文件,主要的一个,而seconary的一个,它们包含了regTalker类......这些文件是一个接一个地链接的,所以这个问题出现在答案中,它不是由于包含的例子。

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

我使用的是firefox 8.0.1,尚未在其他浏览器上尝试过。

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

3 个答案:

答案 0 :(得分:4)

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

如果跨度与其容器一样宽,则其中的文本将显示为左对齐,但您必须先为其应用display: blockdisplay: inline-block,然后才能为其指定宽度。

另外,永远不要使用!important。从长远来看,这只会导致眼泪和牙齿咬牙切齿。

答案 1 :(得分:2)

您对text-align的工作方式略有误解。您无法使用text-align更改其容器中span的对齐方式; text-align会影响其应用的元素的内容,并且不会影响其上下文。 (如果你的span是一个块元素,你的声明会使其内容在其中对齐 ,但仍然不会使span本身在其容器内对齐。)

答案 2 :(得分:0)

我用它来回答GordonM答案评论中最常描述的问题:

.regTalker {
    position: relative;
    top: -5px;
    left: -20%;
    margin-right: -10%;
    font-family: GoodDog;
    font-size: 0.7em;
    color: #000;
}

这用于保持h1标记内的主要文字大致居中,同时将定位应用于其中的span元素。