使用vertical-align不能让图片和文字垂直居中对齐

 问题：

使用vertical-align: middle；不能让图片和文字垂直居中对齐。

以此HTML为例：

<div class="footer">
    <div class="wrapper">
      <div class="top">
        <ul>
          <li>
            <!-- 通过伪元素添加标签，实现精灵图 -->
            <span>我是格鲁</span>
          </li>  
        </ul>
      </div>
    </div>
</div>

解决步骤：

1.使用vertical-align: middle；不能让图片和文字垂直居中对齐，文字偏上。

/* 伪元素添加的标签  行内 */
.footer .top li::before {
  /* 1.未居中 */
  vertical-align: middle;
}

2.使用line-height ，此时图片偏下。

.footer .top li {
  /* 2.添加行高，图片偏下 */
  line-height: 58px;
  height: 58px;
}

3.尝试使用定位的方式，让图片与文字都在同一个起点，然后给文字加margin-left往后移动一段距离。

.footer .top li {
  position: relative;
}

/* 伪元素添加的标签  行内 */
.footer .top li::before {
  /* 3.绝对定位 */
  position: absolute;
  top: 0;
  left: 0;
}

.footer .top li span {
  /* 3.然后调整位置 */
  margin-left: 77px;
}

 总结：

定位可能会引起连锁反应，所以在调整的时候，要注意，哪个时父级，父级下面包括了哪些子级，等等一系列（目前未深入探讨）。