制作思想

• 给 a display：flex
• a 里面是两个 span
• 为了竖着排列，把 a 的主轴改为 y轴
• 让内容在侧轴居中，align-items：center
• 第一个 span 用精灵图

index.html

  <!-- 局部导航 local-nav -->
  <ul class="local-nav">
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
  </ul>

index.css

.local-nav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}
.local-nav li a .local-nav-icon {
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat 0 0;
  background-size: 32px auto;
  margin-top: 8px;
}