文本对齐对齐，不能覆盖答案

【问题标题】：text-align justify, cannot override文本对齐对齐，不能覆盖
【发布时间】：2023-03-12 01:36:01
【问题描述】：

我有一些带有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>

【问题讨论】：

标签： css text-alignment

【解决方案1】：

正确；内联元素不能设置 text-align ，除非它们被设置为显示块。

简单示例：

<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>

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

【讨论】：

另外，span 有什么原因吗？你会有任何与段落元素有关的东西吗？如果没有，因为你没有使用单个类，所以有一个额外的元素似乎很奇怪。
这只是一个例子，它不是真正的代码。我在父块级元素中声明了 text-align ，现在一切都很好。谢谢大家的帮助！
完美。我只是想确定:)

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：