垂直文本，以div为中心

Question

我坚持让文本（单行）垂直运行并保持其容器的中心位置，从左到右，从上到下。

如何使用CSS完成任务？

Answer 1

使用transform属性旋转div这是你的css和padding用于使垂直中心对齐，text-align用于使gorizo​​ntal中心对齐。 Crossbrowser解决方案：

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：您可以在此生成器中轻松编辑css3属性（例如transform）：http://css3generator.com/

Answer 2

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);

希望有所帮助：）

Answer 3

First Of All按照您喜欢的方式定位文本，而不尝试实现旋转。

应用`transform：rotate（-90deg）;以及您div上的供应商细节