Center Unordered Lists In DIV

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 a开发者_StackOverflowre 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.

Edit for new information about horizontal layout:

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

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

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>

div#devices ul { display:block; float:left; }