Center Unordered Lists In DIV

Question

Well I'm in the mix of redesigning my website AlternativeApps.TK so the user gets the best experience.

I have a div called devices which has images of the Windows icon, Linux, Mac, Android, and iOS devices. Under the devices are their names. the text is centered under their icons, but I can't seem to figure out how to center all the images, and text in the same div horizontally, not going down vertically like it is.

Answer 1

Edit for new information about horizontal layout:

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

There! That's all you need to add. No nasty brittle floats.

Answer 2

Ok I misunderstood the question initially try this instead.

#devices{
    margin: 0 auto;
}

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

Then change your markup to something like

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