HTML CSS examples for CSS Widget:UL Element
Center unordered list on page
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> #sitecontent {<!-- w w w.j av a2 s .com--> position:relative; display:block; margin:141px auto 21px; width:100%; max-width:651px; margin:141px auto 0; padding:0 18px 5px 18px; background-color:Chartreuse; border:2px solid yellow; } #buttons { margin:21px auto 0; display:block; height:51px; } #buttons ul { margin:0 auto; padding:0; display:table; list-style:none; } #buttons li { float:left; } </style> </head> <body> <container id="sitecontent"> <div id="header"> <h1>Lorem ipsum </h1> <h2>Lorem ipsum dolor sit amet, consectetur adip</h2> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maec<a href="http://www.lockerz.com">Lorem ipsum </a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Phasellus sed quam pharetra, tincidunt tortor in, pharetra nisl. Maecenas aliquam luctus mauris, vitae venena<br> <br> <b>Lorem</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed fermentum. Aliquam erat volutpat. Vestibulum tortor neque, ornare vitae tempor hendrerit, luctus at neque. Pha</p> </container> <div id="buttons"> <ul> <li> <a href="http://www.twitter.com/tommaxwelll"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="twitter-icon"> </a> </li> <li> <a href="http://www.github.com/tommaxwell"> <img src="https://www.java2s.com/style/demo/Firefox.png" alt="github-icon"> </a> </li> <li> <a href="http://www.instagram.com/tommaxwelll"> <img src="https://www.java2s.com/style/demo/Opera.png" alt="instagram-icon"> </a> </li> <li> <a href="http://www.facebook.com/tommaxwelll"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" alt="facebook-icon"> </a> </li> </ul> </div> </body> </html>