我坚持让文本(单行)垂直运行并在其容器中保持居中,从左到右和从上到下。
我如何用 CSS 完成它?
使用transform
属性来旋转你的 div 这是你的 css,padding
用于使垂直中心对齐和text-align
使水平中心对齐。跨浏览器解决方案:
div {
margin: 50px;
width: 100px;
text-align: center;
height: 50px;
background: red;
-moz-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-webkit-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-o-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
-ms-transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
transform: scale(1) rotate(90deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
p {
margin: auto;
padding: 15px;
}
现场演示:http: //jsfiddle.net/YANxZ/
UPD:transform
您可以在此生成器中轻松编辑 css3 属性(如):http: //css3generator.com/
Firstofall 以您喜欢的方式放置您的文本,而无需尝试实现旋转。
应用`变换:旋转(-90度);以及您的 div 上的供应商详细信息
text-align:center;
line-height:1000px;
-moz-transform:rotate(-270deg);
-moz-transform-origin: bottom left;
-webkit-transform: rotate(-270deg);
-webkit-transform-origin: bottom left;
-o-transform: rotate(-270deg);
-o-transform-origin: bottom left;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
希望有帮助:)