CSS居中布局-优快云博客

2011.01.22 ,只要设置了width:960px;margin:0 auto; 这几个样式就可以了

div +css 让整个网页面的内容自动居中
1. 主要有用到 css 中的 margin 和text-align 属性

example:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>query-autocomplete</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

		<style type="text/css">
body {
	margin: 0px auto;

	/*在IE6中需用到,否则不会居中*/
	text-align: center;
}

.main {
 /*除了在body中设置了margin:0px auto; 还需要在要居中的块中设置此属性*/
	margin: 0px auto;
	width: 600px;
	height: 300px;
	background-color: gray;
	text-align: center;
}
</style>


	</head>

	<body>
		<div class="main">
			<div>
				query auto complete.
			</div>
			<div style="float: left">
				<lable>
				Input
				</lable>
			</div>
		</div>
	</body>
</html>

网页内容居中