Center unordered list on page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Center unordered list on page

Demo Code

ResultView the demo in separate window 

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

Related Tutorials