css - DIVの順序付けされていないリストを中央に配置

Question

私は自分のウェブサイトAlternativeApps.TKを再設計しているので、ユーザーは最高のエクスペリエンスを得ることができます。

Windowsアイコン、Linux、Mac、Android、およびiOSデバイスのイメージを持つdevicesというdivがあります。デバイスの下には名前があります。テキストはアイコンの下の中央に配置されますが、すべての画像と同じ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; }