CSS 计算显示 text-align: center 已应用但在 html 输出中的结果不同答案

【问题标题】：CSS computed showing text-align: center is applied but not the same result in html outputCSS 计算显示 text-align: center 已应用但在 html 输出中的结果不同
【发布时间】：2018-10-25 14:19:53
【问题描述】：

我无法消化这个问题。我明确声明的p.dropify-infos-message 的text-align css 属性覆盖了form p。

此外，计算的 css 显示对 form p css 属性的打击，并显示 text-align: center 是从 p.dropify-infos-message 应用的。那为什么网页中渲染的文字还是左对齐呢？

注意：如果我取消选中表单 p { text-align: left;} 那么它可以工作。但这不应该是合乎逻辑的解释。

【问题讨论】：

你能分享你的代码吗？
@NirajKaushal，我正在本地机器上运行这个 laravel 项目。您有什么建议的替代方法吗？我会尽力的。
更改 dropify-message 类的 css 而不是 dropify-infos-message 类。
我刚刚在你面前得到了这个，但你也很成功。谢谢..你怎么知道我突出显示了错误的块？ .dropify-message p{ text-align: center; } 成功了。
我刚刚检查了这个站点(jeremyfagis.github.io/dropify) 并得知您正在修改另一个类中的 css

标签： css text-align

【解决方案1】：

我只是注意到您正在更改另一个类 (.dropify-infos-message) 的 css 属性，该属性与您要居中对齐的文本无关。更改 .dropify-message 类的 CSS 而不是 .dropify-infos-message 类以将该文本居中对齐。

【讨论】：

【解决方案2】：

我认为这取决于类名称为 .dropify-infos-inner 的 div，使其宽度为 100% 并查看。

【讨论】：

.dropify-wrapper .dropify-preview .dropify-infos .dropify-infos-inner { position: absolute; top: 50%; -webkit-transform: translate(0,-40%); transform: translate(0,-40%); -webkit-backface-visibility: hidden; backface-visibility: hidden; width: 100%; padding: 0 20px; -webkit-transition: all .2s ease; transition: all .2s ease; 已经 100%

【解决方案3】：

请试试这个 CSS：

p.dropify-infos-message { 宽度：100%；显示：弹性；证明内容：中心； }

【讨论】：