2

我有一些文本text-align: justify;的属性是在该文本中的链接和其他嵌套的内联元素中继承的。我想为其中一些设置其他文本对齐模式，例如text-align: center;，但我不能。Firebug 显示父样式被覆盖，但嵌套的内联元素仍然是合理的。我在许多不同的浏览器中观察到这种奇怪的行为，显然他们是按照规范这样做的？这真的是设计的吗？如何解决它？

编辑：一些示例代码。ID=span1 的 span 不能定义自己的文本对齐。它应该是右对齐的，但它是居中的。在我进行试验时，我注意到内联元素根本无法定义任何文本对齐方式。很奇怪。

<html>
<head>
<style type="text/css">
#cubic { width: 495px; height: 200px; background-color: green; text-align: center}
#span1 {text-align: right; color: red}
</style>
</head>

<body>
<p id="cubic">
<span id="span1">This is span 1</span>
</p>
</body>
</html>
4

3 回答 3

3

正确的; 内联元素不能设置文本对齐，除非它们被设置为显示块。

简单的例子：

<html>
<style>
    #spanInline {text-align:right;}
    #spanBlock {text-align:right;display:block;}
    #divBlock {text-align:right;}
    #divInline {text-align:right;display:inline;}
</style>
<body>
<span id="spanInline">asdf</span><br />
<span id="spanBlock">asdf</span><br />
<div id="divBlock">asdf</div><br />
<div id="divInline">asdf</div><br />
</body>
</html>

如果你在元素周围加上边框，你会看到更多关于为什么这不起作用的信息。

于 2011-04-03T00:11:06.960 回答
2

实际上，text-align 只适用于块元素，span 不是块元素。请尝试以下代码：

<p id="cubic">
<div id="span1">This is div 1</div>
</p>

并检查它是否符合您的需求。

于 2011-04-03T00:12:05.790 回答
0

我自己遇到了这个问题，更快的解决方法是使用内联块：

#span1 { display: inline-block; text-align: right; color: red}

将 span 设置为普通的块元素并不好，因为块元素会在元素之前和之后添加换行符。如果您在段落中有跨度，它将完全破坏该段落。

于 2015-10-19T04:15:11.830 回答