固定宽度且居中的CSS排版样式实现方式

　　

今天学到常用的固定宽度且居中的排版样式，有两种实现方式

方式一：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,html
{ background-color: #069;
scrollbar-3dlight-color:#BoC4DE;
scrollbar-arrow-color:#30C;
scrollbar-base-color:#09C;
scrollbar-darkshadow-color:#960;
scrollbar-face-color:#C00;
scrollbar-highlight-color:#C3C;
scrollbar-shadow-color:#3CF;

margin:0px;
padding:0px; text-align::center;
background:#096;
	}
	#container
	{ position::relative;
	 margin:0 auto;
	 padding::0px;
	  width:1024px;
	  text-align::left;
	  background:#3F9;
		}
</style>
</head>

<body>
<div id="container">
<p>dfdfddddddddddddddddddddddddddddddddddd
dfdfddddddddddddddd
dfdddddddddddddd
fddddddddddddddddd

dfdfffffffffffffffffffd
dfdffffffffffffffffffffff</p>
</div>


</body>
</html>

方式二：

body,html
		{
			margin::0px; padding::0px; background::#069}
			
			#container
			{
				position::relative;
				left:50%;
				 width:700px;
				 margin-left:-350px;
				 padding::0px;
				}

　　

 

posted @ 2013-05-05 21:33  怎么收获，怎么载  阅读(312)  评论(0)  编辑  收藏  举报