如何在<ul><li>结构的导航菜单中垂直对齐链接与图片

我来帮你搞定这个垂直对齐的问题！首先咱们先搞清楚为啥图片会和其他链接顶部对齐，然后给你两个可行的解决方案，其中第二个是更现代的布局方式，推荐你试试。

问题根源 #

你现在用了float:left和float:right来排列菜单项，浮动元素的默认垂直对齐方式就是顶部对齐；另外，图片本身是行内元素，没有设置垂直对齐的样式，再加上父元素没有统一的高度/行高作为基准，自然就没法和其他链接居中对齐了。

方案一：优化现有浮动布局 #

如果不想大改现有代码，只需要调整几个样式就能解决：

1. 给菜单的<ul>设置统一的行高，让所有菜单项有一致的高度基准；
2. 给图片添加vertical-align: middle，让它和父元素的中线对齐；
3. 修正HTML里图片标签的语法错误（没闭合标签）。

修改后的CSS代码：

.main-menu { 
 & > ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  overflow: hidden; 
  /* 添加统一行高，数值可以根据你的链接实际高度调整 */
  line-height: 2.5rem;
  & > 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; 
  /* 继承ul的行高，保持高度一致 */
  line-height: inherit;
 } 
 &__user-menu { 
  float:right; 
  border: 1px solid #000000; 
  border-radius: 1.5rem; 
  margin: 0 .1rem; 
  /* 继承行高并设置垂直对齐 */
  line-height: inherit;
  vertical-align: middle;
 } 
 &__user-image { 
  float:right; 
  width: 5rem; 
  &__image { 
   border-radius: 50%; 
   cursor: pointer; 
   /* 关键：设置为行内块并垂直居中 */
   display: inline-block;
   vertical-align: middle;
   /* 调整图片高度，和行高匹配，避免超出 */
   height: 2.3rem;
   width: auto;
  } 
 } 
}

修正后的图片HTML标签：

<img class="main-menu__user-image__image" src="" />

方案二：改用Flexbox布局（推荐） #

浮动布局其实是比较老旧的写法，现代的Flexbox布局可以轻松解决垂直对齐问题，代码也更简洁，后续维护更方便：

修改后的CSS代码： #

.main-menu { 
 & > ul { 
  list-style-type: none; 
  margin: 0; 
  padding: 0; 
  /* 用flex代替浮动，实现左右分布+垂直居中 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 设置菜单高度，按需调整 */
  height: 3rem;
 } 
 &__app-menu { 
  /* 去掉float，给菜单项之间加间距 */
  margin-right: 1rem;
 } 
 &__user-menu { 
  /* 去掉float */
  border: 1px solid #000000; 
  border-radius: 1.5rem; 
  margin: 0 .1rem;
  /* 给用户菜单的链接加内边距，优化点击区域 */
  & > a {
    padding: 0.3rem 1.4rem;
  }
 } 
 &__user-image { 
  &__image { 
   border-radius: 50%; 
   cursor: pointer; 
   /* 调整图片大小，适配菜单高度 */
   height: 2.5rem;
   width: auto;
  } 
 }
 /* 统一链接样式，去掉之前的display:block */
 & > ul > li > a {
  color: $link-color;
  text-decoration: none;
  &:hover {
   color: $link-hover-color;
  }
 }
}

为啥推荐Flexbox？ #

• 一行align-items: center直接让所有子元素垂直居中，完全不用纠结浮动的对齐问题；
• 布局更灵活，后续要调整菜单的排列方式（比如菜单项间距、整体对齐方向）都非常方便；
• 不需要处理浮动带来的清除浮动等额外问题。

内容的提问来源于stack exchange，提问作者user3174311