将多个内联元素居中，无需访问父级上的CSS

Question

我需要能够将 p 元素向左、居中或向右水平对齐。将/可能有多个 div 元素，每个元素都有一个或多个垂直文本 p 元素。

每次我尝试，每个版本都有它自己的问题：

1. 如果我使用浮动，那么我无法将它们居中，如果添加非垂直 p 元素，它最终会出现在垂直文本旁边（因为它没有明确：两者）

2. 如果我使用margin和translateX，它不适用于多个元素。

3. 当我尝试让他们将 CSS 添加到父 div (text-align: center) 时，它也会更改非垂直 p 元素的对齐方式。

4. 我可以使用 Flexbox 来完成此操作，但这会导致当前父 div 上的 CSS 出现问题。

如何在没有 flexbox 且不在父 div 上设置 CSS 的情况下完成此操作？

p {
  font-family: Georgia, serif;
  font-size: 18px;
}

.vert-con {
  /* This is sample CSS I can't actually change the CSS for this */
  position: absolute;
  left: 10px;
  top: 10px;
  width: 360px;
  height: 300px;
  overflow: auto;
  background-color: beige;
}

.vert-p {
  writing-mode: vertical-rl;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-inline: 0 18px;
}

<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>
  <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 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 Text 12</p>
  <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
</div>

Answer 1

这就是你想要的效果吗？

.d1, .d1>div {
  display: flex;
  gap: 1em;
}
.d1 {
  justify-content: space-between;
}
p {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 18px;
  writing-mode: vertical-rl;
}

<div class="d1">
  <div>
    <p>Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: red;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
  </div>
  <div>
    <p style="color: blue;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: green;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 </p>
  </div>
  <div>
    <p style="color: orange;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12</p>
    <p style="color: purple;">Text 12 Text 12 Text 12 Text 12 Text 12 Text 12 </p>
  </div>
</div>