DIV教程之CSS box-align: center完成子框架居中
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。破洛洛文章简介：CSS多个子框架居中.
偶然我们必要令一个宽度流动的容器里的子框架居中（比方一个Div，大概其他block级元素），假如子框架只要一个的话，我们只必要为子框架加上CSS属性margin:auto就能够了。
但假如我们要让多个子框架居中，而且平分父框架残剩的空间的话，我们对一切子框架利用CSSbox-align:center来完成这类效果。
但是今朝另有相称一部分支流扫瞄器不撑持box-align属性，那末我们应当怎样编写CSS，使这类效果能兼容年夜部分的扫瞄器呢？
一般的办法
为了使多个block级元素分列在统一行里，我们习气利用float属性使子框架浮动，然后使用margin属性让每个子框架之间都留出一些空缺的间距。但是如许做会触发典范的IE6双倍marginBUG，如许反而要投进分外的工夫往调试IE6的Hack。
固然我们还能够经由过程display:inline来避开IE6的BUG，但我们仍旧必要调剂这些子框架间的间距，避免最初一个自框架被挤到下一行。
改动子框架级别而且把持残剩的空缺
利用float和margin来让多个子框架居中而且平分父框架残剩空间的做法弱点良多。为了避开这些弱点，我们还可使用另外一种办法：把子框架的级别改成inline-block，而且经由过程letter-spacing属性把持自框架之间的间距。
假定在一个父框架里有四个block级的子容器，每一个子容器的巨细均为100pxx100px。为了让这些子框架能分列在统一行内，我们能够把它们改成inline-block级，因为子框架和父框架之间并没有别的的内容，应此要把持子框架的空间分派将轻而易举。临时假定父框架id=parent，子框架class=child，那末CSS能够如许写：
以下为援用的内容：
#parent{width:615px;border:solid1px#aaa;text-align:center;font-size:20px;letter-spacing:35px;whitewhite-space:nowrap;line-height:12px;overflow:hidden;}.child{width:100px;height:100px;border:solid1px#ccc;display:inline-block;vertical-align:middle;}
在这段款式里，#parent的text-align、letter-spacing、white-space、overflow和.child的vertical-align、display这些属性是完成料想效果的关头，上面注释一下这些属性起了甚么感化。
text-align：使#parent里的一切内容都居中
letter-spacing：把持每一个子框架之间的空缺巨细
white-space:nowrap：避免最初一个子框架被挤到下一行
overflow:hidden：埋没超越#parent局限的内容
vertical-align:middle：使一切子框架都垂直居中
display:inline-block：是一切子框架都分列在统一行，而且坚持block级元素的特征
兼容IE
在今时昔日，老版本的IE扫瞄器已成为网页计划师的心头年夜恨，固然下面的CSS能兼容IE8，但因为IE6和IE7其实不完整撑持inline-block级元素，因而我们还必要写上面的一段Hack，确保在IE6和IE7里能坚持和古代扫瞄器分歧的效果。
以下为援用的内容：
.child{*display:inline;*margin:020px020px;}
本文所举例子的最后的效果能够看这个DEMO。
跋文
本文所举的例子固然只要短短的两句IEHack，但在实践开辟中人人要写的Hack一定要多良多，因而减少老版本IE的义务已迫在眉睫。我听过良多人说：“我不必IE扫瞄器的，我用傲游和天下之窗”，在这里我提示一下人人，对这些没法注释分明的人，我们能够复杂地和他们说：“但凡能用付出宝的扫瞄器都是掉队的，请保持利用。”。
原文地点：http://blog.imbolo.com/center-multiple-divs-with-css/
</p>
提高易用性。使用CSS可以结构化HTML，例如：标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 可以使用 CSS 检查工具进行设计。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器） 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
页:
[1]