如何将字体 - 令人敬畏的图标对齐到中心

Question

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

This is the fiddle

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在display: inline-block;

中添加li

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

将display: inline-block添加到li elemets并将ul parent设置为text-align: center。 小提琴：http://jsfiddle.net/wemsm7me/

Answer 3

在text-align:center中添加ul，在display: inline-block中添加li。

.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;
}
li {
  display: inline-block;
}
ul {
  text-align: center;
}

<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 4

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

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

.inclusion i {
  font-size: 30px;
}
.ft-foot ul{
    padding: 0;
    width: 100%;
    display: inline-block;
    list-style: none;
}
.ft-foot ul li {
    width: 20%;
    float: left;
}