在文本垂直居中的情况下定位在右侧也会将文本旋转90度，同时阻止<img><i>

在文本垂直居中的情况下定位在右侧并将文本旋转90度，同时阻止<img>和<i>元素的旋转。

要实现这个效果，可以使用CSS来进行布局和样式设置。以下是一个可能的解决方案：

HTML代码：

<div class="container">
  <div class="text-container">
    <p class="text">文本内容</p>
  </div>
  <div class="image-container">
    <img src="image.jpg" alt="图片">
  </div>
</div>

CSS代码：

.container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.text-container {
  transform: rotate(-90deg);
  transform-origin: center;
  white-space: nowrap;
}

.text {
  writing-mode: vertical-lr;
}

.image-container {
  margin-left: 10px; /* 调整图片与文本之间的间距 */
}

.image-container img,
.text-container img,
.text-container i {
  transform: rotate(0deg); /* 阻止图片和<i>元素的旋转 */
}

解释：

使用一个父容器.container来包裹文本容器.text-container和图片容器.image-container。
设置.container为display: flex;，使其成为一个弹性容器。
使用align-items: center;和justify-content: flex-end;将文本容器垂直居中并定位在右侧。
使用transform: rotate(-90deg);将文本容器旋转90度，transform-origin: center;设置旋转的中心点为容器中心。
使用writing-mode: vertical-lr;将文本垂直显示。
使用margin-left来调整图片容器与文本容器之间的间距。
最后，使用transform: rotate(0deg);来阻止图片和<i>元素的旋转。