css - Vertical text, centered in div -
i'm stuck on making text (single line) run vertically , remain centered in container, left right , top bottom.
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
Post a Comment