如何在 <ul> <li> 中垂直对齐链接和图片

Question

我正在尝试建立一个菜单，这是 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>

这是我的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;
    }
  }

}

我想让图像与其他链接垂直对齐，目前它与顶部对齐，但我不明白为什么。谢谢。

Answer 1

使用flex和align-items是垂直对齐控制的好方法。更多信息：https://www.w3schools.com/cssref/css3_pr_align-items.asp

另外 margin: auto 可用于分隔 flex 中的项目。

JSX代码：

<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代码：

.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;
    }
  }

}

如何在 <ul> <li> 中垂直对齐链接和图片

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

html

css

sass

jsx

reactjs