如何在不使用display: inline-block的情况下居中text-align: left的元素？

针对你制作EPUB时遇到的布局问题，以下几种方法可以替代display: inline-block实现左对齐元素的居中，同时避免单页模式下的布局错乱：

方法1：margin:auto + 最大宽度 #

给内容容器设置max-width（或固定宽度），配合左右margin:auto实现居中，内部文本保持左对齐。这种方法兼容性好，且不会破坏流式布局：

<div class="estrofe-div">
  <p class="estrofe"></p>
  <p class="estrofe"></p>
  <p class="estrofe"></p>
</div>

.estrofe-div {
  max-width: 80%; /* 根据需求调整宽度 */
  margin: 0 auto;
  text-align: left;
}

方法2：Flexbox布局 #

通过外层容器的flex属性实现居中，内部容器自然继承左对齐：

<div class="centralizar-div">
  <div class="estrofe-div">
    <p class="estrofe"></p>
    <p class="estrofe"></p>
    <p class="estrofe"></p>
  </div>
</div>

.centralizar-div {
  display: flex;
  justify-content: center; /* 水平居中 */
}

.estrofe-div {
  text-align: left;
  width: 80%; /* 可选，限制内容宽度 */
}

方法3：百分比内边距（流式居中） #

直接给内容容器设置左右百分比内边距，模拟居中效果，无需额外外层容器：

<div class="estrofe-div">
  <p class="estrofe"></p>
  <p class="estrofe"></p>
  <p class="estrofe"></p>
</div>

.estrofe-div {
  padding-left: 10%;
  padding-right: 10%;
  text-align: left;
}

注意事项 #

• 优先选择方法1或方法2，这两种方法在EPUB阅读器中的兼容性更稳定，尤其是方法1几乎适配所有现代阅读器。
• 避免使用inline-block的原因是部分EPUB阅读器在单页模式下会对inline-block元素的换行、边界处理出现异常，导致布局断裂。

内容的提问来源于stack exchange，提问作者Yuri Possimozer