Question 45237 in Html Question posted in
Some basic documentation can be found here.

How to align rotated text and icons in CSS – Html

I am trying to teach myself CSS and I am struggling with alignment. What I want to achieve is to have a fixed sidebar that has some icons and a rotated text, all of them should be in a column.

My code:

HTML:

<div class="Sidebar">
    <div id="S1" class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div id="S2" class="SBlock">
        <a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
    </div>
    <div id="Follow" class="SBlock">
        Follow Us
    </div>
</div>

CSS:

.Sidebar {
    position: fixed;
    top: 50%;
    height: 300px;
}

#S1 {
    position: absolute;
    left: 20%;
    top: 10%;
}

#S2 {
    position: absolute;
    left: 20%;
    top: 20%;
}

#Follow {
    transform: rotate(-90deg);
    font-size: 12px;
    position: absolute;
    left: 20%;
    top: 50%;
    font-family: Montserrat;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
}

Which produces this:

Result:

It works fine for the icons, I assume that is because they are the same size, but the text is way further to the right. Any ideas?

Tags:

3

Answers


  1. 0 
       .Sidebar {
      position: fixed;
      top: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .SBlock {
      margin: 10px 0;
    }
    
    #Follow {
      transform: rotate(-90deg);
      font-size: 12px;
      font-family: Montserrat;
      text-transform: uppercase;
      white-space: nowrap;
      writing-mode: vertical-rl;
      text-orientation: mixed;
    }

    Try this…

    Login or Signup to reply.
  2. 0

    I’d suggest you use Flexbox which is so nice for designing layouts also, alignment is so easy using it.
    This article is a good point to start:
    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Login or Signup to reply.
  3. 0

    Try to use writing-mode: sideways-lr instead of transform: rotate(-90deg) to avoid the extra space. And you don’t need position: absolute to get all items align in the sidebar.

    Read more about writing-mode.

    .Sidebar {
  position: fixed;
  height: 300px;
  display: flex;
  flex-direction: column;
  background: red;
  align-items: center;
  width: 50px;
}

#Follow {
  font-size: 12px;
  font-family: Montserrat;
  color: blue;
  writing-mode: sideways-lr;
}
    <div class="Sidebar">
    <div id="S1" class="SBlock">
        <a href="https://twitter.com"><img src="Twitter_Logo.png" width=10px height=10px></a>
    </div>
    <div id="S2" class="SBlock">
        <a href="https://linkedin.com"><img src="Linkedin_Logo.png" width=10px height=10px></a>
    </div>
    <div id="Follow" class="SBlock">
        Follow Us
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search