DIV中心无序列表

Question

我正在重新设计我的网站AlternativeApps.TK，以便用户获得最佳体验。

我有一个名为设备的div，它包含Windows图标，Linux，Mac，Android和iOS设备的图像。设备下面是他们的名字。文本在它们的图标下居中，但我似乎无法弄清楚如何将所有图像居中，并且文本在水平相同的div中，而不是像它一样垂直向下。

您可以下载来源here。

Answer 1

编辑有关水平布局的新信息：

#devices > ul {display: inline-block;}

有！这就是你需要添加的全部内容。没有讨厌脆弱的漂浮物。

Answer 2

好的，我误解了这个问题，最初试试这个。

#devices{
    margin: 0 auto;
}

ul li{
    float: left;
    margin-left: 10px /* arbitrary value to stop them from hitting eachother */
    text-align : center;
}

然后将您的标记更改为

<div id="devices">
    <ul>
        <li> 
            <img src="your image"/>
            <p>your text</p>
        </li>
        <li> ... so on</li>
        <li> ... so on</li>
    </ul>
</div>

Answer 3

div#devices ul { display:block; float:left; }