如何在<li>标签中使图片与文字垂直居中且同行显示？

数据老陈

2026-6-24

解决

内图片与文字同行垂直居中的问题

方案一：Flex布局（推荐）

给列表项启用Flex布局，直接通过属性实现内部元素垂直居中，同时确保图片的间距样式只作用于自身：

.list,
.list-div {
  list-style-type: none;
  font-size: 16px;
  margin-left: 0;
  padding-left: 0;
}

.list-div li {
  display: inline-block;
  padding: 0 15px;
  display: flex;
  align-items: center; /* 核心：垂直居中内部元素 */
}

.list-div {
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.list-div img {
  width: 25px;
  margin-right: 6px; /* 控制图片与文字的间距，不影响<li>整体 */
}

方案二：垂直对齐属性（兼容旧浏览器）

如果不需要Flex，可通过给图片设置vertical-align: middle实现对齐：

.list,
.list-div {
  list-style-type: none;
  font-size: 16px;
  margin-left: 0;
  padding-left: 0;
}

.list-div li {
  display: inline-block;
  padding: 0 15px;
}

.list-div {
  list-style-type: none;
  text-align: left;
  margin: 0;
  padding: 0;
}

.list-div img {
  width: 25px;
  margin-right: 6px;
  vertical-align: middle; /* 核心：让图片与文字中线对齐 */
}