css - 垂直文本，以 div 为中心

Question

我坚持让文本（单行）垂直运行并在其容器中保持居中，从左到右和从上到下。

我如何用 CSS 完成它？

Answer 1

使用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/

Answer 2

Firstofall 以您喜欢的方式放置您的文本，而无需尝试实现旋转。

应用`变换：旋转（-90度）；以及您的 div 上的供应商详细信息

Answer 3

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

希望有帮助:)