我尝试了前面问题中的解决方案,但都没有成功。 我有 2 个动态文本需要旋转并居中到它们的内容 div(左和右)。 我尝试的所有解决方案均无效
代码如下:
#sideLeft span,
#sideRight span {
bottom: 50%;
display: block;
line-height: 0em;
position: absolute;
text-align: center;
top: 50%;
white-space:nowrap;
width: 100%;
}
#sideLeft span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
#sideRight span {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#sideLeft,
#sideRight {
height: 100%;
position: fixed;
top: 0;
width: 18%;
}
#sideLeft {
left: 0;
}
#sideRight {
right: 0;
}
<div id="sideLeft"><span>Left text lorem ipsum sit amet</div>
<div id="sideRight"><span>Right text pellentesque lectus erat, condimentum quis sem vitae, facilisis </span></div>
请问,你能帮帮我吗?
提前致谢:)
br0k3n
最佳答案
要使某物居中(因为你使用了变换),你可以在将它定位到其容器的中心。
您还应该将变换原点设置在元素的中心。
所以这应该可以解决它
#sideLeft span, #sideRight span {
top: 50%;
left:50%;
position: absolute;
text-align: center;
white-space:nowrap;
-webkit-transform-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
-ms-transform-origin:50% 50%;
-0-transform-origin:50% 50%;
transform-origin:50% 50%;
}
#sideLeft span {
-webkit-transform: translate(-50%, -50%) rotate(-90deg);
-moz-transform: translate(-50%, -50%) rotate(-90deg);
-ms-transform: translate(-50%, -50%) rotate(-90deg);
-o-transform: translate(-50%, -50%) rotate(-90deg);
transform: translate(-50%, -50%) rotate(-90deg);
}
#sideRight span {
-webkit-transform: translate(-50%, -50%) rotate(90deg);
-moz-transform: translate(-50%, -50%) rotate(90deg);
-ms-transform: translate(-50%, -50%) rotate(90deg);
-o-transform: translate(-50%, -50%) rotate(90deg);
transform: translate(-50%, -50%) rotate(90deg);
}
关于css - 垂直居中旋转文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28281038/