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 can I add styles of structure to jquery plugin

    How to add an attribute other than style attributes to css?

    multiple CSS classes, how they work and WHY do it this way? [duplicate]

    How to stop one layer going over another

    Need the background to change when the mouse goes over the selected tab. How?

    How to create
    with special form in CSS or Javascript

    Please help me understand how to make my first jquery slider

    How to create an HTML/CSS table with double border? [duplicate]

    How to stretch an input button to available width and center it's text using CSS padding and text-indent?

    css for modal - how to position it above page yet scrollable in window

    How to calculate effective CSS for a DOM node using PHP

    How to add image after button/div css?

    How to proper align after CSS column-count

    How to add header in a row of a table

    css how to align a div to the top of a containing div

    How to chain multiple -webkit-transition animations in my css without keyframes

    How to do this with vertically stacked tabs, instead of horizontal?

    How to control the CSS of the contents that loaded dynamically into iframe?

    How to give different content to every td in the table

    How do you put in percentage based margin to a CSS grid?

    How do I replicate the bootstrap mobile navbar toggle (without using bootstrap)?

    How to import a css file only for Firefox but not for other browsers?

    How to hide a column in a DataGrid?

    How to write regular expressions in CSS

    How to add different CSS3 hover transitions on hover out with CSS

    In jQuery how do I make multiple changes to css in a function?

    AngularJS ng-show animation cross-fade inside ng-repeat

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    How to limit a to only three lines?

    How does gmail preserve copy and pasted web content, maintaining the attached CSS?