如何将列表项中的图片居中，使其与Home文本对齐

解决方案 #

有两种常用的简单实现方式，你可以根据自己的项目情况选择：

方案1：使用vertical-align属性（最轻量，无需改动布局结构）

直接给房屋图标添加vertical-align: middle属性即可实现和旁边文本的居中对齐，CSS代码如下：

.nav-li-img {
  /* 核心对齐属性 */
  vertical-align: middle;
  /* 可选：调整图标和文本的间距 */
  margin-right: 6px;
  /* 可选：统一图标尺寸，避免过大或过小 */
  width: 16px;
  height: 16px;
}

方案2：使用Flex布局（容错率更高，适合复杂导航场景）

给包裹图标和文本的li元素开启flex对齐，后续新增导航项也可以复用这个对齐逻辑：

.align-li-nav {
  display: inline-flex;
  /* 垂直居中对齐内部元素 */
  align-items: center;
  /* 可选：控制内部元素的横向间距 */
  gap: 6px;
}

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