[分享]css列表图标相对文字居中

在网页设计中，列表是一个非常重要的元素，可以用于展示产品特点、菜单选项等。而为了增加表现力，更多的时候我们需要给列表加上图标。但是由于每个列表项的文本长度不同，这样可能会导致图标和文本无法对齐。下面我...

在网页设计中，列表是一个非常重要的元素，可以用于展示产品特点、菜单选项等。而为了增加表现力，更多的时候我们需要给列表加上图标。但是由于每个列表项的文本长度不同，这样可能会导致图标和文本无法对齐。下面我们来介绍一种实现列表图标和文本相对居中的方法。

ul {
  list-style: none; /* 清除默认列表样式 */
}
li {
  position: relative; /* 相对定位 */
  padding-left: 30px; /* 设置左侧内边距 */
  line-height: 1.5; /* 行高 */
}
li:before {
  content: ""; /* 伪元素内容为空 */
  position: absolute; /* 绝对定位 */
  left: 0; /* 与左侧对齐 */
  top: 50%; /* 垂直居中 */
  transform: translateY(-50%); /* 上移50% */
  background-image: url(icon.png); /* 设置图标背景图片 */
  width: 20px; /* 图标宽度 */
  height: 20px; /* 图标高度 */
} 

我们使用伪元素:before来实现给每个列表项添加图标，并且使用定位和transform属性来实现图标和文本的相对居中。其中，top:50%将图标向下移动50%使其和文本对齐，而transform:translateY(-50%)将图标向上移动50%来实现垂直居中。

当然，在使用这种方法的时候，需要根据具体情况来进行微调，例如可以根据图标大小来调整top属性使得图标和文字完美对齐等等。