Main Content -- Love's not time's fool...
[精品]css中元素水平居中显示的方法[精品]css中元素水平居中显示的方法 CSS中元素水平居中显示的方法(2009-06-12) 用CSS让元素居中显示并不是件很简单的事情。同样的CSS居中设置在不同浏览器中的表现也各有千 秋。本文就介绍了在CSS中常见的几种让元素水平居中显示的方法。 1.使用自动外边距实现居中 CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto 即可。在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就...
test content
Header | |
Navigation
|
Main Content -- Love's not time's fool... |
Footer text -- Admit impediments... |
< table >这个标签包括了以下一些属性,将其宽度定义为页面宽度的80%,并将该表格置于页面的中间。在表格的前面有一个空白段落,这就使得页面的顶端与表 格的顶端之间有一些垂直空间。在表格的后面也有一个空白段落,这就使得页面的底端与表格的底端之间也有一些空间。这个表格包括两列三行。顶端的单元被合并 了,用来放置页眉,底端的行也合并了,以安置页脚,而中间那些单元则被分为两列,一个供放置主要内容,另一个则是导航工具栏。 这 是一个简单的例子,诠释的是一种多年以来广为人们使用的技术。在现今的那些应用软件中,有代表性的主要种包含了嵌套表格,用以创建一种复杂得多的版面设 计,不过,它的复杂性虽然被人为加大了,它所采用的基本技术却并没有改变。 将居中的设计转换成使用CSS 要 想将这种传统的基于表格的版面设计转换成用CSS,你只要用divs来代替那些表格和表格单元就行了。一个div取代表格本身,另一个取代那些单个的表格 单元,这些单个的表格单元定义了主要的版面设计元素,诸如标题,页脚,导航工栏,以及主要内容。每个div都有一个id,且它们的id都是独一无二的,你 可以用一个CSS选择器来让它们创建各自不同的样式,每一种样式对应于div中的一种,这种对应关系依据id而建立。那个取代表格的div被标上了id= 外部,其它那些div则靠他们各自的功能来鉴别。 这是已校订过的用div代替表格的XHTML的编码:
Main Content -- Love's not time's fool...
标签中,现在已经被移走了。而那些位于表格前面和后面的空白段落也都不见了。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: thin solid #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: thin solid #000000;
}
解析CSS编码
与基于表格 的版面设计比起来,它的主体样式并没有什么变化。它只不过设置了一下背景颜色,默认正文字体以及尺寸大小。
div#outer 是其中的一种样式,它是这一技术的关键。这就是前面提到过的以div取代表格的样式,它创建了居中的盒子,而这个盒子成了包容该页面所有内容的容器。将宽 度设置为80%的规则设定了该div的宽度,就跟表格标签的相应属性
规定
关于下班后关闭电源的规定党章中关于入党时间的规定公务员考核规定下载规定办法文件下载宁波关于闷顶的规定
该表格的宽度一样。与此相类似,background-color: #FFFFFF为div建立了一个白色的背景,就如同表格中bgcolor="#FFFFFF"属性为表格设置白色背景一样。margin-top: 50px and margin-bottom: 50px则用顶端和底端的空白来取代表格中用来造成垂直空间的空白段落。
这一技术的 关键在于,外部div的中心要安排合适。这里存在一个难题,可以说是我们面临的一个挑战,即div没有像align="center"这样一个属性,这与 表格不同,表格中有这样一种属性。你可以在div的母元素(在本案例,指< body >标签)中使用text-align: center来将外部div置于中心位置。尽管除了正文
以外,大多数浏览器还会为一些诸如div的块元素使用该队列,但是我们有证据可以证明它是对排列正 文这一属性的误用,而且它会使问题复杂化,就如同你创建一些额外的样式来使那些已按正常标准对齐的文字重新回到左边一样。
用CSS来将 块元素置于中心位置的正确方法是这样设置:margin-left: auto,margin-right: auto。这就指示浏览器自动计算页面两边合适的空白宽度,从而将div置于中心。border: thin solid #000000这一规则在外部div的周围添加了一个边界,这是因为用CSS添加很容易,而如果用表格的话就很难了。CSS编码中的其它部份则规定了 div的页眉,页脚,nav,以及主要内容。
div#header和div#footer则设定了那些div的页边空白以及填料。此 外,div#header包含了text-align: center这一规则,它可以将页眉文本置于中心位置,div#footer则包含了border-top: thin solid #000000这一规则,它可以创建一个围绕该div的顶端边缘的边界,而在基于表格的版面设计中,与它相对应的则是位于页脚上方的一些水平线。
在 这个居中的盒子的中央,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中元素水平居中显示的方法】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑,
图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。 [版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。 本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。 网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要:
免费
已有0
人下载
你可能还喜欢
最新资料
资料动态
专题动态
is_597436
暂无简介~
格式:doc
大小:40KB
软件:Word
页数:0
分类:生活休闲
上传时间:2018-08-29
浏览量:1
热点搜索
八年级(上)物理经典易错题集锦57例(带答案)
文明班级评比方案及总结
临江仙理解性默写
五子棋VCF练习题
GMW14671-2011标准中文版
童谣 路登红 六盘水市盘县石桥镇石桥中学 九年级
全国各地地面波高清频率
电极铜管之尺寸及规格
EXO_MAMA韩文版歌词
制造系统方案 – 不止是制造执行系统 (MES)
2022年个人简历模板
技嘉主板_ga-g41mt-s2pt_sc使用手册
四川省勘察设计科技管理信息平台建设单位用户操作手册new
公安信息化建设方案
八年级(上)物理经典易错题集锦57例(带答案)
文明班级评比方案及总结
临江仙理解性默写
五子棋VCF练习题
GMW14671-2011标准中文版
童谣 路登红 六盘水市盘县石桥镇石桥中学 九年级
全国各地地面波高清频率
电极铜管之尺寸及规格
EXO_MAMA韩文版歌词
制造系统方案 – 不止是制造执行系统 (MES)
2022年个人简历模板
技嘉主板_ga-g41mt-s2pt_sc使用手册
四川省勘察设计科技管理信息平台建设单位用户操作手册new
公安信息化建设方案
|