Центр неупорядоченных списков в DIV

Question

Что ж, я нахожусь в процессе редизайна моего веб-сайта AlternativeApps.TK, чтобы пользователь получил лучший опыт.

У меня есть 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; }