Advanced Search

Return to Snippet

Revision: 12863
at March 30, 2009 22:11 by hotdiggity
Initial Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<title>Centered inline-blocks</title>
		<style type="text/css" media="screen">
html, body {padding: 0; margin: 0; border: 0; background: #00f;}

#container {
background: #fff;
margin: 0 150px;
border: 1px solid #f00;
padding: 5px;
text-align: center; /* IE 5.x center */
}

#container ul {
border: 1px solid #000;
display: -moz-inline-box; /* For FF<3 */
display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */
vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */
text-align: left; /* to left align text within divs when container has been set to center */
margin-left: auto; margin-right: auto; padding: 0px;
}

#container ul li {
	padding-right: 10px;
	border-right: 1px solid #ccc;
	padding-left: 10px;
	float: left;
}
		</style>

<!--[if lt IE 8]>
<style type="text/css" media="screen">
ul {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */
ul li {display: inline;}
</style>
<![endif]-->
	</head>
	<body>
		<div id="container">
			<ul>
				<li>test list alignment</li>
				<li>list alignment</li>
				<li>list alignment</li>
			</ul>
		</div>
	</body>
</html>
Initial URL 









Initial Description














Initial Title





Centred footer list menu 2









Initial Tags














Initial Language





HTML