如何在一行上集中圖標列表？

我有一列圖標，我想在一行上顯示。我一直讓圖標左對齊，但不居中頁面。有任何想法嗎？如何在一行上集中圖標列表？

這裏是我的代碼

- 圖標的列表 - >

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

來源

2014-03-13 user3413720

你的問題不明確。請把它放在FIDDLE中 –

嘗試浮動圖標左邊。

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

或顯示的圖標爲內聯塊：

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

來源

2014-03-13 05:58:54

包裝您在一個div UL給寬度100％的div和應用CSS規則文本對齊：中心; 選中此jsfiddle

text-align: center;

希望這將幫助你:)

來源

2014-03-13 06:14:15 Guru

如何在一行上集中圖標列表？

回答

相關問題