如何将字体精美的图标居中对齐

Question

我想让图标居中对齐排成一行。

这是小提琴

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}

.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

.inclusion i {
  font-size: 30px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a>
    </li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a>
    </li>
  </ul>
</div>

Answer 1

加入display: inline-block;​li

.ft-foot {
    float: left;
    width: 100%;
    padding: 3px 10px;
    background: #000;
    text-align:center;
}
.ft-foot ul li {
  display: inline-block;
  margin:0 10px;
}
.inclusion {
  color: white;
  padding: 5px 0 10px 0;
  display: block;
  letter-spacing: 1px;
  text-align: center;
}
.inclusion span {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="ft-foot">
  <ul>
    <li><a class="inclusion"><i class="fa fa-male" aria-hidden="true"></i><span>Guide</span></a></li>
    <li><a class="inclusion"><i class="fa fa-car" aria-hidden="true"></i><span>Site seeing</span></a></li>
    <li><a class="inclusion"><i class="fa fa-building-o" aria-hidden="true"></i><span>Hotels</span></a></li>
    <li><a class="inclusion"><i class="fa fa-plane" aria-hidden="true"></i><span>Transportation</span></a></li>
    <li><a class="inclusion"><i class="fa fa-cutlery" aria-hidden="true"></i><span>Food</span></a></li>
  </ul>
</div>