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