如何统一SVG图标自定义列表项的尺寸并优化文本对齐？

1. 统一SVG图标尺寸 #

不同SVG文件的原始尺寸、viewBox参数往往存在差异，直接引用会导致显示大小不一致，你可以通过以下方式强制统一：

• 在::before伪元素中固定width和height，同时用background-size: contain确保图标按比例缩放且填满容器：

/* 通用列表项伪元素基础样式 */
.list-item-home::before,
.list-item-linkedin::before {
  content: '';
  display: inline-block;
  /* 统一图标尺寸，可根据需求调整数值 */
  width: 16px;
  height: 16px;
  margin-right: 8px;
  /* 确保SVG适配容器，避免拉伸变形 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* 单独设置每个图标背景 */
.list-item-home::before {
  background-image: url('home.svg');
}

.list-item-linkedin::before {
  background-image: url('linkedin.svg');
}

如果SVG本身带有多余空白（viewBox范围过大），可以直接修改SVG文件的viewBox属性，裁剪掉无关空白，让图标显示更紧凑，减少适配难度。

2. 与文本对齐的优化 #

默认的inline-block元素会和文本基线对齐，容易出现视觉偏移，你可以用以下几种方法调整：

• 方法一：使用vertical-align属性
  在伪元素样式中添加vertical-align: middle;，让图标和文本的中线对齐：

.list-item-home::before,
.list-item-linkedin::before {
  /* 其他样式不变 */
  vertical-align: middle;
}

• 方法二：通过flex布局实现精准对齐
  给列表项设置display: flex; align-items: center;，伪元素和文本会自动垂直居中，同时用gap控制间距，比margin更灵活：

li {
  display: flex;
  align-items: center;
  gap: 8px; /* 图标和文本的间距，可按需调整 */
}

li::before {
  content: '';
  width: 16px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
}

.list-item-home::before {
  background-image: url('home.svg');
}

.list-item-linkedin::before {
  background-image: url('linkedin.svg');
}

• 方法三：微调line-height
  如果文本的line-height较大，图标可能会偏移，你可以给伪元素设置和文本一致的line-height，或者用margin-top/margin-bottom修正位置：

.list-item-home::before,
.list-item-linkedin::before {
  /* 其他样式不变 */
  line-height: 1.5; /* 和文本的line-height保持一致 */
}

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