css中元素水平居中显示的方法.docx

而那些位于表格前面和后面的空白段落也都不见了。

CSS格式会处理所有的格式化以及空间的问题。

以下是CSS的编码，就是这些编码，将页面设计成一种居中的样式，这种设计与前面所说的基于表格的设计很类似：

body{

background-color:

#999999;

font-size:

12px;

font-family:

Verdana,Arial,Helvetica,sans-serif;

}

div#outer{

width:

80%;

background-color:

#FFFFFF;

margin-top:

50px;

margin-bottom:

50px;

margin-left:

auto;

margin-right:

auto;

padding:

0px;

border:

thinsolid#000000;

}

div#header{

padding:

15px;

margin:

0px;

text-align:

center;

}

div#nav{

width:

25%;

padding:

10px;

margin-top:

1px;

float:

left;

}

div#main{

margin-left:

30%;

margin-top:

1px;

padding:

10px;

}

div#footer{

padding:

15px;

margin:

0px;

border-top:

thinsolid#000000;

}

解析CSS编码

与基于表格的版面设计比起来，它的主体样式并没有什么变化。

它只不过设置了一下背景颜色，默认正文字体以及尺寸大小。

div#outer是其中的一种样式，它是这一技术的关键。

这就是前面提到过的以div取代表格的样式，它创建了居中的盒子，而这个盒子成了包容该页面所有内容的容器。

将宽度设置为80%的规则设定了该div的宽度，就跟表格标签的相应属性规定该表格的宽度一样。

与此相类似，background-color:

#FFFFFF为div建立了一个白色的背景，就如同表格中bgcolor="#FFFFFF"属性为表格设置白色背景一样。

margin-top:

50pxandmargin-bottom:

50px则用顶端和底端的空白来取代表格中用来造成垂直空间的空白段落。

这一技术的关键在于，外部div的中心要安排合适。

这里存在一个难题，可以说是我们面临的一个挑战，即div没有像align="center"这样一个属性，这与表格不同，表格中有这样一种属性。

你可以在div的母元素（在本案例，指标签）中使用text-align:

center来将外部div置于中心位置。

尽管除了正文以外，大多数浏览器还会为一些诸如div的块元素使用该队列，但是我们有证据可以证明它是对排列正文这一属性的误用，而且它会使问题复杂化，就如同你创建一些额外的样式来使那些已按正常标准对齐的文字重新回到左边一样。

用CSS来将块元素置于中心位置的正确方法是这样设置：

margin-left:

auto，margin-right:

auto。

这就指示浏览器自动计算页面两边合适的空白宽度，从而将div置于中心。

border:

thinsolid#000000这一规则在外部div的周围添加了一个边界，这是因为用CSS添加很容易，而如果用表格的话就很难了。

CSS编码中的其它部份则规定了div的页眉，页脚，nav，以及主要内容。

div#header和div#footer则设定了那些div的页边空白以及填料。

此外，div#header包含了text-align:

center这一规则，它可以将页眉文本置于中心位置，div#footer则包含了border-top:

thinsolid#000000这一规则，它可以创建一个围绕该div的顶端边缘的边界，而在基于表格的版面设计中，与它相对应的则是位于页脚上方的一些水平线。

在这个居中的盒子的中央，div#nav和div#main建立了两个纵列。

在div#nav样式中，float:

left这一规则将div推到它的母元素（外部div）的左边，而width:

25%这一规则将该div的宽度设置为它的母元素的25%。

由于该navdiv被移到了左端，其宽度也被限定了，这就为主要的div留下了活动空间，让它可以移到该navdiv的右边，这样就取得了两个纵列的效果。

div#main样式包含了左边页面空白30%的规则，以让主要文本排列在一个整齐的纵栏中，而不是分散开来，甚至散到该nav纵栏外面。

主要的div左边的空白页面比navdiv中左边空白页面的宽度稍稍大一点。

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

还剩页未读，继续阅读

举报
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：

css 元素 水平 居中 显示 方法

  冰点文库所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。