CODEWITHSUNDEEP
htmlcssreactjssassjsx
user3174311
user3174311

Reputation: 1993

How to vertical align links and image inside <ul> <li>

I am trying to build a menu, this is the html

<header className="header">
    <div className="main-menu">
        <ul>
            <li className="main-menu__app-menu"><Link href="#"><a>Link A</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link B</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link C</a></Link></li>

            <li className="main-menu__user-menu"><Link href="#"><a>Link D</a></Link></li>
            <li className="main-menu__user-menu"><Link href="#"><a>Link E</a></Link></li>
            <li className="main-menu__user-menu">
                <img class="main-menu__user-image__image" src="">
            </li>
        </ul>
    </div>
</header>

This is my css

.main-menu {

  & > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

    & > li {
      display: inline;

      & > a {
        display: block;

        text-align: center;
        padding: 0 1.4rem 0rem 1.4rem;
        color: $link-color;
        text-decoration: none;

        &:hover {
          color: $link-hover-color;
        }
      }
    }
  }

  &__app-menu {
    float:left;
  }

  &__user-menu {
    float:right;
    border: 1px solid #000000;
    border-radius: 1.5rem;
    margin: 0 .1rem;
  }

  &__user-image {
    float:right;
    width: 5rem;

    &__image {
      border-radius: 50%;
      cursor: pointer;
    }
  }

}

I would like to have the image vertically aligned with the other links, at the moment it is aligned to the top and I can't figure out why. Thank you.

Upvotes: 0

Views: 182

Answers (1)

Amirreza Noori
Amirreza Noori

Reputation: 1525

Using flex and align-items is a good way for vertical alignment control. More information: https://www.w3schools.com/cssref/css3_pr_align-items.asp

Also margin: auto is useful to separate items in the flex.

JSX code:

<header className="header">
    <div className="main-menu">
        <ul>
            <li className="main-menu__app-menu"><Link href="#"><a>Link A</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link B</a></Link></li>
            <li className="main-menu__app-menu"><Link href="#"><a>Link C</a></Link></li>

            <li className="main-menu__user-menu main-menu__user-image">
                <img class="main-menu__user-image__image" src="">
            </li>            
            <li className="main-menu__user-menu"><Link href="#"><a>Link E</a></Link></li>
            <li className="main-menu__user-menu"><Link href="#"><a>Link D</a></Link></li>
        </ul>
    </div>
</header>

Sass code:

.main-menu {

  & > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;

    & > li {
      display: block;

      & > a {
        display: block;

        text-align: center;
        padding: 0 1.4rem 0rem 1.4rem;
        color: $link-color;
        text-decoration: none;

        &:hover {
          color: $link-hover-color;
        }
      }
    }
  }

  &__app-menu {
    
  }

  &__user-menu {
    border: 1px solid #000000;
    border-radius: 1.5rem;
    margin: 0 .1rem;
  }

  &__user-image {
    margin-left: auto;

    &__image {
      border-radius: 50%;
      cursor: pointer;
    }
  }

}

Upvotes: 1

Related Questions