无法修改父元素CSS时，如何居中多个内联元素？

核心思路 #

把要统一对齐的竖排<p>都塞进一个独立的块级容器里，给这个容器加text-align属性就行。因为竖排p是inline-block类型，会跟着容器的文本对齐规则走，而且这个容器只管自己内部的元素，完全碰不到父容器和其他非竖排的文字。

具体操作 #

1. 添加容器样式 #

在现有CSS里新增这段代码，根据需求选择对应的对齐方式：

/* 专门包裹竖排元素的容器 */
.vert-group {
  /* 三选一，注释掉另外两个即可 */
  text-align: left;    /* 左对齐 */
  /* text-align: center; */ /* 居中对齐 */
  /* text-align: right; */  /* 右对齐 */
  width: 100%; /* 必须占满父容器宽度，对齐规则才会生效 */
  margin: 1em 0; /* 可选：让容器和上下的普通文字保持间距 */
}

2. 调整HTML结构 #

把所有需要统一对齐的竖排<p class="vert-p">都包裹进这个容器中：

<div class="vert-con">
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  
  <!-- 所有竖排元素统一放在这个容器内 -->
  <div class="vert-group">
    <p class="vert-p">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p class="vert-p" style="color: red;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p class="vert-p" style="color: blue;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p class="vert-p" style="color: green;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  </div>
  
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
</div>

方案优势 #

• 完全不修改父容器.vert-con的CSS，避免触发原有样式冲突
• 不使用flexbox，符合限制条件
• 非竖排<p>元素不受任何影响，保持原有布局逻辑
• 所有竖排元素作为整体对齐，解决了多元素无法统一对齐的问题

内容的提问来源于stack exchange，提问作者Andrew Foulds