Advanced Search

Center aligned block lists

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

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <html>
  2. <head>
  3. <style type="text/css">
  4. ul
  5. {
  6. list-style-type:none;
  7. margin:0 auto;
  8. padding:10px;
  9. padding-top:6px;
  10. padding-bottom:6px;
  11. background:#565656;
  12. text-align:center;
  13. }
  14. li
  15. {
  16. display:inline;
  17. }
  18. a:link,a:visited
  19. {
  20. font-weight:bold;
  21. color:#FFFFFF;
  22. background-color:#98bf21;
  23. text-align:center;
  24. padding:6px;
  25. text-decoration:none;
  26. text-transform:uppercase;
  27. }
  28. a:hover,a:active
  29. {
  30. background-color:#7A991A;
  31. }
  32.  
  33. </style>
  34. </head>
  35.  
  36. <body>
  37. <ul>
  38. <li><a href="#home">Home</a></li>
  39. <li><a href="#news">News</a></li>
  40. <li><a href="#contact">Contact</a></li>
  41. <li><a href="#about">About</a></li>
  42. </ul>
  43.  
  44. <p><b>Note:</b> If you only set the padding for a elements (and not ul), the links will go outside the ul element. Therefore, we have added a top and bottom padding for the ul element.</p>
  45. </body>
  46. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.