《
用CSS创建一个布局居中的页面》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344212013.htm
最近有一个读者问到，怎样用CSS创建一个居中的页面布局。该读者所寻求的，是要到达这样一种效果，就犹如在一个1024象素宽的页面上设计出一个800象素宽的表格。这是一种使用很普遍的页面设计办法，依照传统，它要靠嵌套表格才干达到这一效果，因而，这位读者追寻一种用CSS来达到这一后果的方法并不让人惊奇。
div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;
}
这是已校正过的用div取代表格的XHTML的编码：
解析CSS编码
body {
background-color: #999999;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
这一技术的要害在于，外部div的中心要部署合适。这里存在一个困难，可以说是我们面临的一个挑衅，即div没有像align="center"这样一个属性，这与表格不同，表格中有这样一种属性。你可以在div的母元素（在本案例，指< body >标签）中使用text-align: center来将外部div置于中心位置。只管除了正文以外，大多数浏览器还会为一些诸如div的块元素使用该队列，然而我们有证据可以证实它是对排列正文这一属性的误用，而且它会使问题庞杂化，就犹如你创建一些额定的样式来使那些已按畸形尺度对齐的文字从新回到左边一样。
要想将这种传统的基于表格的版面设计转换成用CSS，你只有用divs来代替那些表格和表格单元就行了。一个div取代表格自身，另一个取代那些单个的表格单元，这些单个的表格单元定义了主要的版面设计元素，诸如题目，页脚，导航工栏，以及主要内容。每个div都有一个id,且它们的id都是举世无双的,用cssText属性批量操作样式技巧，你可以用一个CSS抉择器来让它们创建各自不同的样式，每一种款式对应于div中的一种，这种对应关联根据id而树立。那个代替表格的div被标上了id=外部，其它那些div则靠他们各自的功效来辨别。
div#footer {
padding: 15px;
margin: 0px;
border-top: thin solid #000000;
}
首先，因为是做比拟，让我们来看一个例子，它是一种基于一个居中表格的页面设计。图表A中显示了一个例子，以下是这个例子的编码：
留神一下所有那些陈说的格局，本来它们被包含在<table>和<td>标签中，当初已经被移走了。而那些位于表格前面和后面的空白段落也都不见了。CSS格式会处置所有的格式化以及空间的问题。
<body>
<p> </p>
<table width="80%" border="0" align="center" cellpadding="0" cellspacing="10"bgcolor="#FFFFFF">
<tr>
<td colspan="2"><h2 align="center">Header</h2></td>
</tr>
<tr>
<td width="150px" valign="top",用CSS3实现根据文件类型显示不同图标;><h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</td>
<td valign="top"><p>Main Content -- Love's not
time's fool...</p></td>
</tr>
<tr>
<,用CSS3伪类target如何制作tab选项卡效果;td colspan="2"><hr />,用CSS Sprites加快网页加载速度;
<p>Footer text -- Admit impediments...</p>
</td>
</tr>
</table>
<p> </p>
</body>
div#outer {
width: 80%;
background-color:#FFFFFF;
margin-top: 50px;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
padding: 0px;
border: thin solid #000000;
}
以下是CSS的编码，就是这些编码，将页面设计成一种居中的样式，这种设计与前面所说的基于表格的设计很类似：
div#nav {
width: 25%;
padding: 10px;
margin-top: 1px;
float: left;
}
用CSS来将块元素置于中央位置的准确方式是这样设置：margin-left: auto，margin-right: auto。这就唆使阅读器主动盘算页面两边适合的空白宽度，从而将div置于中央。border: thin solid #000000这一规则在外部div的四周增添了一个边界，这是由于用CSS增加很轻易，而假如用表格的话就很难了。CSS编码中的其它部份则划定了div的页眉，页脚，nav，以及重要内容。
<body>
<div id="outer">
<div id="header">
<h2>Header</h2>
</div>
<div id="nav">
<h4>Navigation</h4>
<ul>
<li>Let me not to the marriage of true minds</li>
<li>Admit impediments; love is not love</li>
<li>Which alters when it alteration finds</li>
</ul>
</div>
<div id="main">
<p>Main Content -- Love's not time's fool...</p>
</div>
<div id="footer",用class实现IE8“添加网页快讯”功能;>
<p>Footer text -- Admit impediments...</p>
</div>
</div>
</body>
传统的做法：居中的布局
div#header {
padding: 15px;
margin: 0px;
text-align: center;
}
在这个居中的盒子的中心，div#nav和div#main建立了两个纵列。在div#nav样式中，float: left这一规则将div推到它的母元素（外部div）的左边，而width: 25%这一规则将该div的宽度设置为它的母元素的25%。因为该nav div被移到了左端，其宽度也被限定了，这就为主要的div留下了运动空间，让它可以移到该nav div的右边，这样就获得了两个纵列的效果。div#main样式包含了左边页面空白30%的规则，以让主要文本排列在一个整洁的纵栏中，而不是疏散开来，甚至散到该nav纵栏外面。主要的div左边的空白页面比nav div中左边空白页面的宽度稍稍大一点。在我的“用CSS沉没来创建一个三栏页面版面设计”一文中，我具体先容了一种技术，这一技术是用CSS漂浮来创建页面设计中的多个纵列的。
用CSS来创建一个居中的页面设计的基础技巧相对来说较简略，不外与同类比拟，也简单不了太多。让咱们看一下，要将这种由来已久的基于表格的设计改变成用CSS，该怎么做。
与基于表格的版面设计比起来，它的主体样式并不什么变更。它只不过设置了一下背景色彩，默认注释字体以及尺寸大小。
div#outer是其中的一种样式，它是这一技术的症结。这就是前面提到过的以div取代表格的样式，它创建了居中的盒子，而这个盒子成了容纳该页面所有内容的容器。将宽度设置为80%的规则设定了该div的宽度，就跟表格标签的相应属性规定该表格的宽度一样。与此相相似，background-color:#FFFFFF为div建破了一个白色的背景，就如同表格中bgcolor="#FFFFFF"属性为表格设置白色背景一样。margin-top: 50px and margin-bottom: 50px则用顶端和底端的空白来取代表格顶用来造成垂直空间的空白段落。
--> [
网站建设之]用CSS创建一个布局居中的页面
Tag：页面 布局 一个 创建
--------------------------------------------------------------------------------
将居中的设计转换成应用CSS
这是一个简单的例子，诠释的是一种多年以来广为人们使用的技术。在现今的那些利用软件中，有代表性的主要种包含了嵌套表格，用以创建一种复杂得多的版面设计，不过，它的复杂性固然被人为加大了，它所采取的根本技术却并没有转变。
海内最大的酷站演示中心! 点击看优良酷站设计...
图表B显示了成果，即用CSS履行的一个居中页面的版面设计。
< table >这个标签包括了以下一些属性，将其宽度定义为页面宽度的80%，并将该表格置于页面的旁边。在表格的前面有一个空白段落，这就使得页面的顶端与表格的顶端之间有一些垂直空间。在表格的后面也有一个空白段落，这就使得页面的底端与表格的底端之间也有一些空间。这个表格包括两列三行。顶端的单元被合并了，用来放置页眉，底真个行也合并了，以安顿页脚，而中间那些单元则被分为两列，一个供放置主要内容，另一个则是导航工具栏。
div#header跟div#footer则设定了那些div的页边空缺以及填料。此外，div#header包含了text-align: center这一规矩，它可以将页眉文本置于核心地位，div#footer则包括了border-top: thin solid #000000这一规则，它能够创立一个缭绕该div的顶端边沿的边界，而在基于表格的版面设计中，与它绝对应的则是位于页脚上方的一些程度线。
(责任编辑：网站建设)
用CSS创建一个布局居中的页面相关文章