Centred footer list menu 2


/ Published in: HTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  5. <title>Centered inline-blocks</title>
  6. <style type="text/css" media="screen">
  7. html, body {padding: 0; margin: 0; border: 0; background: #00f;}
  8.  
  9. #container {
  10. background: #fff;
  11. margin: 0 150px;
  12. border: 1px solid #f00;
  13. padding: 5px;
  14. text-align: center; /* IE 5.x center */
  15. }
  16.  
  17. #container ul {
  18. border: 1px solid #000;
  19. display: -moz-inline-box; /* For FF<3 */
  20. display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
  21. vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */
  22. text-align: left; /* to left align text within divs when container has been set to center */
  23. margin-left: auto; margin-right: auto; padding: 0px;
  24. }
  25.  
  26. #container ul li {
  27. padding-right: 10px;
  28. border-right: 1px solid #ccc;
  29. padding-left: 10px;
  30. float: left;
  31. }
  32. </style>
  33.  
  34. <!--[if lt IE 8]>
  35. <style type="text/css" media="screen">
  36. ul {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
  37. ul li {display: inline;}
  38. </style>
  39. <![endif]-->
  40. </head>
  41. <body>
  42. <div id="container">
  43. <ul>
  44. <li>test list alignment</li>
  45. <li>list alignment</li>
  46. <li>list alignment</li>
  47. </ul>
  48. </div>
  49. </body>
  50. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.