我有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,尚未在其他浏览器上尝试过。
如果有人对此问题有任何建议或意见,或者如何解决问题,我们将不胜感激,谢谢!
答案 0 :(得分:4)
text-align适用于它应用的元素的内容,而不是元素本身。跨度内的文本是左对齐的,但跨度本身在其父对象中居中对齐。由于span是一个内联级别元素,因此它只有内容的宽度,并且当跨度居中对齐时,其内容也将显示为居中对齐......
如果跨度与其容器一样宽,则其中的文本将显示为左对齐,但您必须先为其应用display: block
或display: 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
元素。