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

Question

I want to make the icons to be arranged in a row with center align.

This is the fiddle

 .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

Add display: inline-block; in 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> 

Answer 2

Add display: inline-block to the li elemets and set the ul parent to text-align: center . Fiddle: http://jsfiddle.net/wemsm7me/

Answer 3

Add text-align:center in ul and display: inline-block in 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;
}