首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

HTML代码:

代码语言:txt
复制
<div class="container">
  <div class="text-container">
    <p class="text">文本内容</p>
  </div>
  <div class="image-container">
    <img src="image.jpg" alt="图片">
  </div>
</div>

CSS代码:

代码语言:txt
复制
.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
  • 设置.containerdisplay: 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>元素的旋转。

请注意,这只是一个示例解决方案,具体的实现方式可能因具体情况而有所不同。另外,由于要求不能提及特定的云计算品牌商,因此无法提供腾讯云相关产品和产品介绍链接地址。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券