Question

我有一个我要在一行显示的图标列表。我不停地将图标左对齐但不在页面上居中。任何想法？

这是我的代码

！ - 图标列表 - ＆gt;

<!-- 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中，给div赋予宽度100％并应用css规则text-align：center; 请检查此jsfiddle

text-align: center;

希望这会对你有所帮助:)

如何将图标列表集中在一行？

2 个答案: