CODEWITHSUNDEEP
cssrotationtransformcentering
digory doo
digory doo

Reputation: 2311

How to Center Rotated text with CSS

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?

Upvotes: 0

Views: 4474

Answers (1)

Arbel
Arbel

Reputation: 30989

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/

Upvotes: 2

Related Questions