如何将图片与ul li左中对齐？及图片显示异常排查求助

最简洁且现代的方案是用 Flexbox 布局，它能轻松搞定元素的垂直居中+左对齐需求，步骤如下：

1. 给图片和ul的共同父容器添加Flex属性：

   .skills-container {
     display: flex;
     align-items: center; /* 让元素在垂直方向居中 */
     gap: 10px; /* 图片和ul之间的间距，可根据需求调整 */
   }
   

2. 移除ul上多余的浮动属性，交给Flex控制布局：

   .skills ul {
     margin: 10px 0 0 0;
     padding: 0;
     /* 去掉原来的 float: left; Flex会自动处理横向排列 */
   }
   

如果需要兼容更老的浏览器，也可以用传统的 vertical-align 方案：

.skills img {
  vertical-align: middle;
}
.skills ul {
  display: inline-block;
  vertical-align: middle;
  margin: 10px 0 0 10px;
  padding: 0;
}

从你贴的代码片段来看，大概率是这几个细节导致的：

1. 绝对定位的a标签缺少定位参数 #

你给.skills li a加了position: absolute;，但没指定top/left/宽高，这会让a标签（以及里面的图片）要么偏移到视野外，要么尺寸为0直接隐藏。建议补充定位规则：

.skills li a {
  position: absolute;
  top: 50%;
  right: 10px; /* 比如把图片放在li的右侧 */
  transform: translateY(-50%); /* 让图片在li内垂直居中 */
  width: 16px; /* 图片的实际宽度 */
  height: 16px; /* 图片的实际高度 */
}

2. li的固定高度+内边距限制了图片空间 #

你的.skills li设置了height: 31px和padding: 7px 10px 0 10px，这意味着li内部可用的垂直空间只有 31px - 7px = 24px。如果图片高度超过24px，会被li截断，看起来就像“不显示”。可以去掉固定高度，让li自适应内容：

.skills li {
  /* 移除 height: 31px; */
  padding: 7px 10px; /* 上下内边距统一，给图片留足空间 */
}

3. float布局可能引发的父容器高度塌陷 #

虽然你给ul加了width: 100%，但如果ul的父容器没有清除浮动，可能会导致整体布局错乱，间接让图片被隐藏。可以给父容器加清除浮动的样式：

.skills::after {
  content: "";
  display: block;
  clear: both;
}

先调整这几点，应该就能解决图片不显示的问题啦~

内容的提问来源于stack exchange，提问作者Mr world wide