html - 如何将 "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”这个类，段落将继承居中值。

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

我尝试过包括“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

The initial CSS keyword applies the initial value of a property to an element. It can be applied to any CSS property, including the CSS shorthand all.