如何对齐div中间的旋转文字

本文介绍了如何对齐div中间的旋转文字的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

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

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

jsfiddle/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 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?

jsfiddle/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: 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.