首页 - 网校 - 面授 - 品牌榜 - 书城 - 视线 - 模拟考场 - 考友录 - 论坛 - 导航 -

首页　考试吧论坛　 Exam8视线　考试商城　网络课程　模拟考试　考友录　实用文档　求职招聘　论文下载
		2011中考 \| 2011高考 \| 2012考研 \| 考研培训 \| 在职研 \| 自学考试 \| 成人高考 \| 法律硕士 \| MBA考试 MPA考试 \| 中科院
		四六级 \| 职称英语 \| 商务英语 \| 公共英语 \| 托福 \| 雅思 \| 专四专八 \| 口译笔译 \| 博思 \| GRE GMAT 新概念英语 \| 成人英语三级 \| 申硕英语 \| 攻硕英语 \| 职称日语 \| 日语学习 \| 法语 \| 德语 \| 韩语
		计算机等级考试 \| 软件水平考试 \| 职称计算机 \| 微软认证 \| 思科认证 \| Oracle认证 \| Linux认证华为认证 \| Java认证
		公务员 \| 报关员 \| 银行从业资格 \| 证券从业资格 \| 期货从业资格 \| 司法考试 \| 法律顾问 \| 导游资格报检员 \| 教师资格 \| 社会工作者 \| 外销员 \| 国际商务师 \| 跟单员 \| 单证员 \| 物流师 \| 价格鉴证师人力资源 \| 管理咨询师考试 \| 秘书资格 \| 心理咨询师考试 \| 出版专业资格 \| 广告师职业水平驾驶员 \| 网络编辑
		卫生资格 \| 执业医师 \| 执业药师 \| 执业护士
		会计从业资格考试（会计证） \| 经济师 \| 会计职称 \| 注册会计师 \| 审计师 \| 注册税务师注册资产评估师 \| 高级会计师 \| ACCA \| 统计师 \| 精算师 \| 理财规划师 \| 国际内审师
		一级建造师 \| 二级建造师 \| 造价工程师 \| 造价员 \| 咨询工程师 \| 监理工程师 \| 安全工程师质量工程师 \| 物业管理师 \| 招标师 \| 结构工程师 \| 建筑师 \| 房地产估价师 \| 土地估价师 \| 岩土师设备监理师 \| 房地产经纪人 \| 投资项目管理师 \| 土地登记代理人 \| 环境影响评价师 \| 环保工程师城市规划师 \| 公路监理师 \| 公路造价师 \| 安全评价师 \| 电气工程师 \| 注册测绘师 \| 注册计量师
		缤纷校园 \| 实用文档 \| 英语学习 \| 作文大全 \| 求职招聘 \| 论文下载 \| 访谈 \| 游戏

考试动态　报考指南　考试大纲　历年真题　模拟试题　复习资料　经验　编辑推荐　模拟考场　论坛　短信提醒

初级职称| 程序员　网络管理员　中级职称| 软件设计师　网络工程师高级职称| 系统分析师信息系统项目管理　热点专题

您现在的位置：考试吧(Exam8.com) > 软件水平考试 > 复习资料 > 网页制作 > 正文

论坛交流 在线模考 考友群 图书咨询 考试用书

CSS常见的让元素水平居中显示方法

来源：考试吧（Exam8.com）　2009-3-12　【考试吧：中国教育培训第一门户】　模拟考场

　　用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。
　　1.使用自动外边距实现居中
　　CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：
　　div#container {
　　margin-left: auto;
　　margin-right: auto;
　　width: 168px;
　　}
　　在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式（compliance mode）下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本不低于6.0。
　　尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。
　　2.使用text-align实现居中
　　另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。
　　之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：
　　body{
　　text-align:center;
　　}
　　之后会出现什么问题吗？body的所有子孙元素都会被居中显示。
　　因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：
　　p {
　　text-align:left;
　　}
　　可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。
　　3.组合使用自动外边距和文本对齐
　　因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：
　　body {
　　text-align: center;
　　}
　　#container {
　　margin-left: auto;
　　margin-right: auto;
　　border: 1px solid red;
　　width: 168px;
　　text-align: left
　　}
　　可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。
　　4.负外边距解决方案
　　负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。
　　下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。
　　然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。
　　#container {
　　background: #ffc url(mid.jpg) repeat-y center;
　　position: absolute;
　　left: 50%;
　　width: 760px;
　　margin-left: -380px;
　　}
　　看，没有任何hack！虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广—甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是吗？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。

软考站考试吧

1 2 下一页

文章责编：liujun1987 　

看了本文的网友还看了

·如何查看网页的responseheader信息并利用其提升性能  (2009-7-1)
·ASP入门教程静态网页和动态网页  (2009-6-2)
·网页制作:web网页设计标准大小  (2009-6-2)
·网页制作技巧:用VFP管理网页文件  (2009-6-2)
·网站关键词摆放的网页的5个地方  (2009-6-2)
·浅谈DIV+CSS网页布局开发心得  (2009-6-2)

返回首页 在线模考 考友录 考试论坛 考试教材

2011上半年软考软件设计师考试试题及答案…
2011年上半年软考软件设计师考试试题及答…
2011年上半年系统集成项目管理师试题及答…
2009年软考网络工程师考试下午试题(三)
2009年软考网络工程师考试下午试题(二)
2009年软考网络工程师考试下午试题(一)
2009年软考网络工程师考试上午模拟试题(二…
2009年软考网络工程师考试上午模拟试题(一…
2009年上半年软考网络工程师考试上午冲刺…
2009年上半年软考网络工程师考试上午冲刺…

2011年上半年软考成绩查询入口开通(高级)
2011年上半年山东软考成绩查询入口
2011年下半年北京软考报名入口
2011年软件水平考试网络工程师章节复习汇总
2011年上半年河南软考成绩查询入口
2011年上半年河北软考成绩查询入口
2011年下半年江苏软考报名入口
2011年软件水平考试网络工程师常用计算公式汇
2011年软件水平考试网络管理员学习笔记汇总
2011年下半年山东计算机软件水平考试报名通知

软件水平考试栏目导航

信息处理技术员
电子商务技术员

信息安全工程师
信息系统运行管理员

多媒体应用制作
软件设计师

信息系统监理师
电子商务设计师

计算机辅助设计师
计算机硬件工程师

嵌入式系统设计师
数据库系统工程师

系统构架设计师
网络规划设计师

系统规划与管理师
信息系统项目管理师

IT技术
特色栏目
考试用书
模拟考场

交流互动

128种考试
公务员
学历类
外语类
计算机
资格类
外贸类
会计类
工程类
医学类
考生相关频道
实用工具

公务员 | 招警考试 | 选调生 | 村官 | 公检法 | 事业单位 | 政法干警 | 社会工作师 | 乡镇公务员 | 教师 | 军转干 | 路转税

关于本站　网站声明　广告服务　联系方式　付款方式　站内导航　客服中心　友情链接　考试论坛　最新更新　网站地图

中国科学院研究生院权威支持(北京)　电话：010-62168566　传真：010-62192699

首页　考试吧论坛　 Exam8视线　考试商城　网络课程　模拟考试　考友录　实用文档　求职招聘　论文下载
		2011中考 \| 2011高考 \| 2012考研 \| 考研培训 \| 在职研 \| 自学考试 \| 成人高考 \| 法律硕士 \| MBA考试 MPA考试 \| 中科院
		四六级 \| 职称英语 \| 商务英语 \| 公共英语 \| 托福 \| 雅思 \| 专四专八 \| 口译笔译 \| 博思 \| GRE GMAT 新概念英语 \| 成人英语三级 \| 申硕英语 \| 攻硕英语 \| 职称日语 \| 日语学习 \| 法语 \| 德语 \| 韩语
		计算机等级考试 \| 软件水平考试 \| 职称计算机 \| 微软认证 \| 思科认证 \| Oracle认证 \| Linux认证华为认证 \| Java认证
		公务员 \| 报关员 \| 银行从业资格 \| 证券从业资格 \| 期货从业资格 \| 司法考试 \| 法律顾问 \| 导游资格报检员 \| 教师资格 \| 社会工作者 \| 外销员 \| 国际商务师 \| 跟单员 \| 单证员 \| 物流师 \| 价格鉴证师人力资源 \| 管理咨询师考试 \| 秘书资格 \| 心理咨询师考试 \| 出版专业资格 \| 广告师职业水平驾驶员 \| 网络编辑
		卫生资格 \| 执业医师 \| 执业药师 \| 执业护士
		会计从业资格考试（会计证） \| 经济师 \| 会计职称 \| 注册会计师 \| 审计师 \| 注册税务师注册资产评估师 \| 高级会计师 \| ACCA \| 统计师 \| 精算师 \| 理财规划师 \| 国际内审师
		一级建造师 \| 二级建造师 \| 造价工程师 \| 造价员 \| 咨询工程师 \| 监理工程师 \| 安全工程师质量工程师 \| 物业管理师 \| 招标师 \| 结构工程师 \| 建筑师 \| 房地产估价师 \| 土地估价师 \| 岩土师设备监理师 \| 房地产经纪人 \| 投资项目管理师 \| 土地登记代理人 \| 环境影响评价师 \| 环保工程师城市规划师 \| 公路监理师 \| 公路造价师 \| 安全评价师 \| 电气工程师 \| 注册测绘师 \| 注册计量师
		缤纷校园 \| 实用文档 \| 英语学习 \| 作文大全 \| 求职招聘 \| 论文下载 \| 访谈 \| 游戏