我需要能够将 p 元素向左、居中或向右水平对齐。将/可能有多个 div 元素,每个元素都有一个或多个垂直文本 p 元素。
每次我尝试,每个版本都有它自己的问题:
如果我使用浮动,那么我无法将它们居中,如果添加非垂直 p 元素,它最终会出现在垂直文本旁边(因为它没有明确:两者)
如果我使用margin和translateX,它不适用于多个元素。
当我尝试让他们将 CSS 添加到父 div (text-align: 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>
这就是你想要的效果吗?
.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>