我需要能够水平对齐的p元素左，中心，或右.将/可能有多个div元素，每个元素都有一个或多个垂直文本p元素.
每次我try ，每个版本都有自己的皱纹:
-
如果我使用float，那么我就不能将它们居中，如果添加了一个非垂直的p元素，它会在垂直文本旁边结束(因为它没有clear:both)
-
如果我使用margin和margin，它不适用于多个元素.
-
当我试图让他们添加CSS到父div(text—loc:center)时，它也改变了非垂直p元素的对齐方式.
-
我可以使用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>