如何对齐div中间的旋转文字 [英] How to align rotated text in the middle of a div

问题描述

我想垂直对齐100％高度div中间的旋转文字，如下图所示。

所以每当屏幕大小发生变化时，文本就会停留在div的中间。

任何人都有解决方案为此？

http://jsfiddle.net/SVkPU/1/

  .rotate-270 {
 -o-transform：rotate（270deg）; 
 -moz-transform：rotate（270deg）; 
 -webkit-transform：rotate（270deg）; 
 transform：rotate（270deg）; 
} 
 
 .left {
 float：left; 
背景：＃000; 
颜色：#fff; 
 text-align：center; 
 height：50px; 
 
} 
 
 .right {
 float：right; 
背景：＃000; 
颜色：#fff; 
} 
  

解决方案

b $ b http://davidwalsh.name/css-vertical-text

也尝试使用柔性盒。但是，由于它们（仍然）并没有完全得到所有浏览器，特别是移动Safari浏览器的支持，所以我必须采用更支持的方法。

I would like to vertical align rotated text in the middle of a 100% height div, like the image below.

So whenever the screen size changes the text stays in the middle of the div.

Anyone has a solution for this?

http://jsfiddle.net/SVkPU/1/

.rotate-270 {
    -o-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform:rotate(270deg);
}

.left {
    float:left;
    background:#000;
    color:#fff;
    text-align:center;
    height:50px;

}

.right {
    float:right;
    background:#000;
    color:#fff;
}

解决方案

This worked for me: http://davidwalsh.name/css-vertical-text

also tried to use flexboxes. But as they are (still) not fully supported by all browsers especially (mobile) safari - on which it must work I go with a more supported approach.

这篇关于如何对齐div中间的旋转文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！