如何在单行中居中显示图标列表？

Question

我有一个要在一行中显示的图标列表。我总是让图标左对齐，而不是在页面上居中。有什么想法吗？

以下是我的代码

!--图标列表-->

<!-- Single Icon -->
<li class="overview animated entrance" data-appear-bottom-offset="100">
<!-- Feature List -->
    [tooltip] [ul class=feature-list] 
    [list-item spanclass=list-dot]Wireframing[/list-item] 
    [list-item spanclass=list-dot]Content Strategy[/list-item] 
    [list-item spanclass=list-dot]Information Architecture[/list-item] 
    [/ul] [/tooltip] 
 <!-- Icon --> 
 [icon-img name=ux title=UX][/icon-img]
 </li>

<!-- Single Icon -->
<li class="overview animated entrance" data-appear-bottom-offset="100">
<!-- Feature List -->
    [tooltip] [ul class=feature-list] 
    [list-item spanclass=list-dot]Cloud[/list-item] 
    [list-item spanclass=list-dot]Mobile Payment[/list-item] 
    [list-item spanclass=list-dot]iBeacon[/list-item] 
    [/ul] [/tooltip] 
 <!-- Icon --> 
 [icon-img name=tech title=Tech][/icon-img]
 </li>


<!-- Single Icon -->
<li class="overview animated entrance" data-appear-bottom-offset="100">
<!-- Feature List -->
    [tooltip] [ul class=feature-list] 
    [list-item spanclass=list-dot]Facebook[/list-item] 
    [list-item spanclass=list-dot]Google +[/list-item] 
    [list-item spanclass=list-dot]Twitter[/list-item] 
    [/ul] [/tooltip] 
 <!-- Icon --> 
 [icon-img name=social title=Social][/icon-img]
 </li>

​

Answer 1

试着让图标向左浮动。

.overview, .animated, .entrance {
   float: left;
}

或将图标显示为内联块：

.overview, .animated, .entrance {
   display: inline-block;
}

Answer 2

将您的ul包装在div中，将宽度100%赋给div，并应用css规则text-align: center；检查此jsfiddle

text-align: center;

希望本文能对您有所帮助:)