将无序列表置于 DIV 中居中

Question

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

我有一个名为 devices 的 div，其中包含 Windows 图标、Linux、Mac、Android 和 iOS 设备的图像。设备下方是它们的名字。文本在图标下方居中，但我似乎不知道如何将所有图像和文本水平居中在同一个 div 中，而不是像现在这样垂直向下。

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; }