Advanced Search

Centred footer list menu 2

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

Expand | Embed | Plain Text

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.