CODEWITHSUNDEEP
htmlcss
RC07JNR
RC07JNR

Reputation: 595

How can I rotate <div>s and keep alignment?

I am creating a sidebar nav panel where some links are held and I want them to be displayed sideways. Here is the current nav panel:

Currnt Nav Bar

To break it down:

  1. The Menu Icon

Here is the HTML for the Icon

<div class="menu-bar-container">
    <div class="menu-icon-container">
        <span class="fas fa-bars menu-icon"></span>
    </div>
</div>

And it's CSS:

/* Menu Icon */
.menu-bar-container {
    width: 100%;
    height: 10%;

    display: flex;
    align-items: center;
}

.menu-icon-container {
    width: 100%;
    text-align: center;
}

.menu-icon {
    font-size: 19px;
    color: darkgrey;
}
  1. These are the nav links, that I want is for them to be displayed vertically instead of horizontally, here is the exisitng code:

The HTML:

{{-- Social Links --}}
<div class="social-links-container">
    {{-- Facebook Link --}}
    <div class="fb-link-container">
        <a href="">FACEBOOK</a>
    </div>

    <div class="dot-icon-container">
        <span class="far fa-circle dot-icon"></span>
    </div>

    {{-- Instagram Link --}}
    <div class="insta-link-container">
        <a href="">INSTAGRAM</a>
    </div>

    <div class="dot-icon-container">
        <span class="far fa-circle dot-icon"></span>
    </div>

    {{-- Twitter Link --}}
    <div class="twitter-link-container">
        <a href="">TWITTER</a>
    </div>
</div>

The CSS:

/* Social Links */
.social-links-container {
    width: 100%;
    height: 80%;

    display: flex;
    align-items: center;
}

.dot-icon-container {
    margin-inline-start: 30px;
    margin-inline-end: 30px;
}

.dot-icon {
    font-size: 10px;
}

When I add transform: rotate(-90deg); to the .social-links-container class the result is like so:

Nav links not centered

How can I rotate these and still have them centered? Thanks!

Upvotes: 0

Views: 42

Answers (1)

messismore
messismore

Reputation: 139

Use writing-mode: vertical-lr:

/* Social Links */
.social-links-container {
    height: 80%;
    display: flex;
    align-items: center;
    writing-mode: vertical-lr;
    justify-content: center;
    transform: rotate(180deg);
}

Upvotes: 2

Related Questions