css - Vertical text, centered in div -


i'm stuck on making text (single line) run vertically , remain centered in container, left right , top bottom.

enter image description here

how done css?

use transform property rotate div here css , padding making vertical center align , text-align making gorizontal center align. crossbrowser solution:

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

live demo: http://jsfiddle.net/yanxz/

upd: can edit css3 properties (like transform) in generator: http://css3generator.com/


Comments

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -