CODEWITHSUNDEEP
csslistcenterunordered
Michael Schwartz
Michael Schwartz

Reputation: 8415

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 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.

Upvotes: 2

Views: 2944

Answers (3)

Loktar
Loktar

Reputation: 35309

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>

Upvotes: 1

Nicholas Wilson
Nicholas Wilson

Reputation: 9685

Edit for new information about horizontal layout:

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

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

Upvotes: 3

Samich
Samich

Reputation: 30095

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

Upvotes: 0

Related Questions