如何将“text-align”设置为其默认值（禁用“text-align”继承）

Question

在我的文档（一本小说）的特定部分中，我有一个大部分居中但不是其内容的文本块。为此，我使用了：

<div class="center">
    <div class="inline-block">
        <p class="left">Some text</p>
        <p class="left">More text</p>
        <p class="left">Even more text</p>
    </div>
</div>

<style>
.center {
    text-align: center;
}

.inline-block {
    display: inline-block;
    width: /* sometimes I specify it, others I let the biggest paragraph do it by itself  */;
}

.left {
    text-align: left;
}
</style>

总的来说，我对这个解决方案很满意。但是，如您所见，我需要使用“.left”类来避免段落继承其父 div 的居中值。问题是我不想设置文档的对齐方式（对齐/左对齐）；我希望用户（或默认浏览器/应用程序/epub 阅读器/等）改为设置它。问题是，如果我不添加此类“.left”，段落将继承居中值。

有没有办法让这个段落有一个“默认”值（justified 或 left）？¿我可以使用其他元素/样式实现相同的整体设计吗？我可以通过任何方式禁用此段落的继承吗？

我尝试了包括“transform: translateX(-50%)”、“display: table”、将段落设置为“value: initial;”、混合伪类/属性选择器......基本上，我能看到的一切我可以骗过我的路。到目前为止没有任何效果。有任何想法吗？

Answer 1

你也可以使用 initial

.center {
  text-align: center;
}

.rtl {
  direction: rtl;
}

.inline-block {
  display: inline-block;
  width: /* sometimes I specify it, others I let the biggest paragraph do it by itself  */
  ;
  border: solid;
}

.left {
  text-align: initial;
}

<div class="center">
  <div class="inline-block">
    <p class="left">Some text</p>
    <p class="left">More text</p>
    <p class="left">Even more text</p>
  </div>
</div>
<hr/>Test when direction is the otherway round...
<div class="center rtl">

  <div class="inline-block">
    <p class="left">Some text</p>
    <p class="left">More text</p>
    <p class="left">Even more text</p>
  </div>
</div>

https://developer.mozilla.org/en-US/docs/Web/CSS/initial

的initialCSS关键词的属性的初始值适用于一个元件。它可以应用于任何 CSS 属性，包括所有的 CSS 简写。