vertically centre a horizontal list within a div


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

To centre, make "line-height" the same as the div height.


Copy this code and paste it in your HTML
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. <title>Untitled Document</title>
  6. <style>
  7.  
  8. #links{
  9. border: 1px solid #eee;
  10. height: 50px;
  11. line-height: 50px;
  12. }
  13.  
  14. #links ul
  15. {
  16. margin: 0px;
  17. padding: 0px;
  18. float: left;
  19. list-style-type: none;
  20. }
  21.  
  22. #links ul li {
  23. margin-right: 20px;
  24. padding: 0px;
  25. display: inline;
  26. }
  27. </style>
  28. </head>
  29. <body>
  30. <div id="links">
  31. <ul>
  32. <li><a href="#">Link 1 </a></li>
  33. <li><a href="#">Link 2 </a></li>
  34. <li><a href="#">Link 3 </a></li>
  35. </ul>
  36. </div>
  37. </body>
  38. </html>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.