CODEWITHSUNDEEP
css
derdida
derdida

Reputation: 14904

Align rotated Text to center

Is it possible to align a rotated text to center?

For example here:

enter image description here ill try using:

.accordion div.image .title {
    bottom: -15px;
    color: #fff;
    display: block;
    font-size: 16px;
    max-height: 200px;
    position: absolute;
    transform: rotate(270deg);
    transform-origin: 0 0 0;
    white-space: normal;
    left: 20px; // this is only the way to center it from left corner }

But when the text has a line break, i have no chance to align it to the center.

Any ideas?

Upvotes: 0

Views: 408

Answers (1)

Marc Audet
Marc Audet

Reputation: 46785

Here is one approach (proof of concept) that involves using the translate function of the transform property and display: table-cell.

First, use display: inline-block on the parent container to get a shrink-to-fit to the image size (or else specify fixed dimensions if you can).

You then define an absolutely positioned container to contain the label. I fixed the width and height (this makes things easier) and then rotated and translated the box to center it within the parent.

Finally, I used vertical-align: middle in the nested table-cell container to allow multiple lines of text to remain centered.

If you are adding this to a pre-existing HTML/CSS structure (accordion?), you need to make the CSS very specific so that you don't break other CSS styling.

You may still need to make some adjustments depending on how you want the bottom of the label to be positioned and so on.

.image {
    position: relative;
    border: 1px dashed blue;
    display: inline-block;
}
.image img {
    display: block;
}
div.cell {
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}
div.image .title {
    font-size: 16px;
    white-space: normal;
    color: #fff;
    display: table;
    border: 1px dotted blue;
    position: absolute;
    bottom: 0%;
    left: 0%;   
    transform: rotate(270deg) translate(50%,50%);
    transform-origin: 50% 50% 0;
    width: 300px;
    height: 100px;
    margin-left: -50px;
}
<div class="image">
    <img src="http://www.placehold.it/300x400">
    <div class="title"><div class="cell">The title text
        that can span two lines or more in a box<div></div>
</div>

Upvotes: 1

Related Questions