如何将指定<p>元素移至<div>上方并设置垂直文本显示？

现有一段HTML结构和对应的CSS样式，当前显示效果为中文标题在红色圆形下方，希望将#my_title的中文文本移至红色圆形div上方并设置为垂直显示，达到垂直文字位于红圆正上方的效果。

现有HTML代码 #

<!-- index.html -->
<div id="my_container">
  <p id="my_title">這是中文</p>
  <div id="my_mark"></div>
  <p id="my_text">2022-12-08 13:15</p>
</div>

现有CSS代码 #

#my_container {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 70%;
}

#my_title {
  text-align: center;
}

#my_mark {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  margin-top: -45px;
  margin-bottom: -10px;
}

.my_text {
  text-align: center;
  width: 200px;
}

实现方案 #

只需为#my_title添加以下CSS属性即可达成目标：

#my_title {
  text-align: center;
  writing-mode: vertical-rl; /* 设置文字垂直排版（从右到左），适配中文垂直显示 */
  margin-bottom: -20px; /* 调整负边距，让标题上移至红色圆形正上方 */
}

属性说明 #

• writing-mode: vertical-rl：核心属性，将文字排版方向改为垂直，从右向左排列，完美适配中文的垂直显示需求；
• margin-bottom: -20px：利用负边距抵消元素间的默认间距，让标题紧贴红色圆形上方，配合容器的flex垂直居中布局，刚好对齐红圆中心位置。

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