Centering Rotated Elements

About a month ago I came across an issue where I was rotating some text to be vertical vs horizontal. When I did this it was impossible to keep the text correctly positioned.

Here’s the CSS I was using:

.box {
  width: 33.3%;
  height: 100%;
  float: left;
  font-size: 2em;
  cursor: pointer;
  filter: alpha(opacity=80);
  opacity: 0.8;
}
.vertical-text {
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  text-transform: uppercase;
  width: 4%;
}

And some HTML:

<div class="content">
  <div class="box">
    <div class="vertical-text">Skills</div>
  </div>
  <div class="box">
    <div class="vertical-text">Resume</div>
  </div>
  <div class="box">
    <div class="vertical-text">Contact</div>
  </div>
</div>

I was dynamically updating the elements with JS when clicked to show content. And the .vertical-text classes were meant to be the header for each tab. Unfortunately what would happen is when I clicked on each tab the heading would move north of the container.

You can get a feel for the problem here: http://jsfiddle.net/t24tq/

The problem is that rotating elements rotate about their center. When the width of the element changes, the center moves and this changes the point of rotation. So since I wasn’t using fixed widths for my vertical-text I got the awkward movements.

So to fix all you need to do is set a fixed width:

.vertical-text {
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  text-transform: uppercase;
  width: 30px;
}

 

Write a Comment

Your email address will not be published. Required fields are marked *