How to Center Rotated text with CSS


Tags: css,rotation,transform,centering

Problem :

I'm trying to write a bar with rotated tabs. Rotation is done with transform:rotate. The problem: width:100% is computed before rotation, so it will actually be set to 100% of the height of the rotated tab.

.tab-caption {
    position: absolute;
    width: 100%;  /* width before rotation! */
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    transform: rotate(90deg);
    white-space: nowrap;
}

Vertical centring works correctly even if the text overlaps the div. For horizontal centring, this trick doesn't work; the text would always start at the left even though text-align:center was specified.

The fiddle is here: http://jsfiddle.net/digorydoo/pzvuntd4/

In the fiddle, everything works fine for short captions, because the height that becomes the width after rotation is shorter than the caption. For long captions, centring is not done correctly. How to fix this?



Solution :

Actually it's very simple:

.tab-caption {
    position: absolute;
    /* width: 100%; */ /* (remove this) width before rotation! */
    top: 50%;
    height: 2px;  /* actual text will overlap! */
    margin-top: -1px;  /* subtract half the height */
    line-height: 0px;  /* centre the text on the base line */
    text-align: center;
    left: 50%; /* added */
    transform: translateX(-50%) rotate(90deg); /* added translateX */
    white-space: nowrap;
}

Demo http://jsfiddle.net/pzvuntd4/2/


    CSS Howto..

    How to get rid of CSS cascading in internal element widgets

    How to get cards with his content perfectly alligned

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to change CSS to the same class but another input name

    CSS - How to centre a link button

    How to pass a css % parameter in javascript/jquery

    how to make div fixed and ot move upon window resize

    How to apply css in react component when using ES6?

    How to create CSS-based (big) quotation marks?

    Border-bottom showing on top

    CSS: how can I make this table fit the border when resized?

    How to make the div's appear inline in the following code?

    How to detect if my search bar has been expanded?

    HTML/CSS How to have to tags on same line?

    How to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?

    How do I change gradient color of text inside the Jumbotron?

    using overflow hidden, show a partial element when the children are too large for container

    How to set Safari print margins via CSS to print borderless

    How to centre text as CSS content attribute vertically and horizontally?

    How to change size of SVG circle

    How can I use CSS to code a 3-sided box (no left side) with rounded corners and a shadow?

    how to use liveview in dreamweaver cs5 and local xampp server

    How can I make a DIV element Fixed but non-Scaleable?

    How large can CSS values be?

    How can I style a select option like a table?

    How do I make my footer sit at the bottom of my content?

    How to reload a css background-image inside a directive

    How to add a shadow for underline (bottom border) in css

    I can't get all the div's to show up with the same #id

    How to set css class to div area of ckeditor