如何解决旋转文本 -90 度垂直居中对齐,文本长度未知
我正在尝试将文本旋转 -90,将其与父 div 的右边缘对齐,并垂直居中。
<div>
<p class="verticaltext">
some text
</p>
<div>
.verticaltext {
top: 50%;
left: 100%;
white-space: nowrap;
transform: rotate(-90deg) translateY(-50%);
transform-origin: bottom left;
position: absolute;
}
div {
position: relative;
}
问题是定位到右侧和垂直中心的组合。
Left 100% 允许我将文本置于右侧,而不管文本的长度如何,但这需要原点左下角。
问题是前 50% 和平移 y -50% 结合原点左下角将文本的左下角置于垂直中心,我希望文本的中心与垂直中心对齐。如果我将原点设置为中心,我可以获得垂直中心,但它会将我的位置设置为 100% 的左侧。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。