jsheffers jsheffers - 1 year ago 115
Sass (Sass) Question

Horizontal and bottom alignment of rotated text

I am having trouble creating this component for a project I'm working on. The requirements include a vertical bar where the text is rotated

90deg
, horizontally centered within the bar, and aligned to the bottom of the bar. The screenshot below is what it's supposed to look like. I've linked to a codepen at the bottom to show you what I have so far.

Other Notes


  1. I'd like to try and avoid absolute positioning if possible

  2. The width of the actual title itself needs to be variable

  3. When the window is made smaller I'd prefer it to cutoff from the bottom not the top (not a deal breaker)



vertical

Also keep in mind that I've set
overflow-y: hidden
on the
<html>
and
<body>
tags to keep vertical scrolling from happening.

Codepen example

Answer Source

This layout is a bit tricky to achieve without absolute positioning.

Check out the solution - https://codepen.io/trentmrand/pen/KvPgXY


I've removed the content container, so your resulting HTML is now as follows,

 <div class="c-key">
  <div class="c-key__label">Some label</div>
  <h1 class="c-key__title">
    Milestones
  </h1>
</div>

I've also updated your SCSS to use absolute positioning, as follows,

.c-key {
  width:600px; 
  height: 600px;
  position: relative; // make container use relative positioning
  background: #000;

  &__label {
    background: #fff;
    border-right: 1px solid #000;
    font-size: 13px;
    padding: .25rem .5rem;
    text-transform: uppercase;
  }

  &__title {
    color: #fff;
    font-size: 5rem;
    transform: translateX(46px) rotate(-90deg); // rotate text and translate half of the text height to center
    transform-origin: left bottom; // rotate from bottom-left
    position: absolute; // use absolute positioning with this element
    bottom: 0; // position at bottom of parent element
    left: 50%; // position at middle of parent element
    margin: 0 !important; // remove default padding from header tag
  }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download