《
如何让不固定个数的子元素自动适应居中》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302340X2013.htm
我们来看看运行效果如何：
好吧。说一下实现的重点。如果子元素不是固定的话，我们通常的实现方法是应用来 display:inline-block 解决，在 IE6 ～ 7 中应用 display:inline 但要让这个元素领有 layout，通常我们是增加 zoom:1; 来实现。这样，大略代码会是这样的：
#test{display:block;text-align:center;} #test li{display:inline-block;*display:inline;*zoom:1;width...
但这个子元素须要是块状的，有时候就会现出高下不平的现象，这很好解决，用加上一句：
#test{display:block;text-align:center;} #test li{ display:inline-block;*display:inline;*zoom:1; /* 解决不能程度对齐问题 */ vertical-align:top; }
好吧，当初能运行了。样子还不错，IE 下面已经能够到达我们请求的后果了。但，Firefox 等高等阅读器居然呈现了空隙，如下图：
本文我们学习以下如何让不固定个数的子元素自动适应居中。如何让固定宽度的子元素，在不断定宽度的容器内水平居中（自适应）：UL 宽度不固定；LI 宽度固定，LI 是一个块。看起来还挺简单的。但大家为什么始终探讨一直。奇异，实现了一下。发明实在仍是很简略的。还是没有超越本来的解决计划，即便用 display:inline-block。实际要实现的效果应当是下面这个样子：
--> [
网站建设之]如何让不固定个数的子元素主动适应居中
好吧，真正要哀伤的货色来了。这是一个畸形景象，只有用 display:inline-block 就会有这样的问题。由于 IE6~7 并不完整支撑这个属性，所以不存在这样的问题。好吧，似乎是因为空白引起的。假如把所有空缺都删除了就没问题了。但这始终不是什么好措施。咱们的解决方式是（多谢@鸽子一起解决这个问题）：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>UL宽度自适应水平居中-建站学www.jzxue.com<,如何让一个久不管理的旧站死灰复燃;/title> <style type="text/css"> *{margin:0;padding:0;} .wrap{font-size:0;list-style:none;display:block;text-align:center;} /* hack for chrome */ @media screen and (-webkit-min-device-pixel-ratio:0){ #test{-webkit-text-size-adjust:none;font-size:1px;} } li{font-size:13px;vertical-align:top;display:inline-block;*display:inline;*zoom:1;} #test{margin-bottom:30px;} #test li{text-align:left;width:130px;height:130px;padding:20px;background:#ffc;border:1px solid #f30;} #test p{margin-bottom:10px;} #test .button{display:block;width:60px;height:25px;line-height:25px;text-align:center;background:#f30;color:#fff;white-space:nowrap;} .nav{border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:2px 0;margin-bottom:10px;background:#f7f7f7;} ,如何让iframe的背景透明.nav li{background:#333;padding:8px 10px;border:3px solid #fff;} .nav a{color:#fff;text-decoration:none;} </style> </head> <body> <ul id="test" class="wrap"> <li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p> <a class="button">button</a></li> <li><p>sed do eiusmod tempor incididunt ut</p> <a class="button">button</a></li> <li><p>fugiat nulla pariatur. Excepteur sint occaecat cupidatat non</p></p> <a class="button">button</a></li> </ul> <ul class="nav wrap"> <li><a href="#">item 1</a></li>,如何让IE支持HTML5元素; <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li> <li><a href="#">item 5</a></li> </ul> <ul class="nav wrap"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <,如何让IE支持CSS3圆角;li><a href="#">item 3</a></li> </ul> <ul class="nav wrap"> <li><a href="#">,如何让IE6支持max-width&min-width样式;item 1</a></li> </ul> </body> </html>
Tag：元素 居中 元素 居中
好吧，良久没写 CSS 了。在想，如果有天我开端记忆力不好，忘却 CSS 是怎么写的，怎么办？会不会像《Boston Legal》的 Deny Crane 一样抓狂。
而事实上，这并不是简单的事。作为款式方面的主导者开发者，职责就是去解决这样的问题。那么写 Demo 吧。如果这个解决方案搞定了，那么，我们将可以容易地做到，让不固定个数的子元素相对窗口自适应居中。比方这样的导航，无论子元素是多少，都会自适应居中：
ul{ float: left; left: 50%; position: relative; } li{ float: left; position: relative; right: 50%; }
UPDATE: 2011.1.26 16:21
但如果要给背景设置图片的话，第二种方法仿佛有点悲剧。
UPDATE: 2011.1.25 21:15
多谢 Atrl 同学跟 Justice 同窗供给的更便利的办法，防止了 hack：
=======
@media screen and (-webkit-min-device-pixel-ratio:0){ #test{ /* 让 chrome 支持 12px 以下的字体 */ -webkit-text-size-adjust:none; } }
然而。问题是这个纠结的浏览器，竟然不认 font-size:0 这样的写法。还好经测试，荣幸的是 font-size:1px 它意识，而且效果恰好是我们想要的：不间隙。终极的代码是：
#test{ display:block;text-align:center; /* 解决间隙问题 */ font-size:0; } #test li{ display:inline-block;*display:inline;*zoom:1; /* 解决不能水平对齐问题 */ vertical-align:top; /* 解决间隙问题后遗症解决 */ font-size:13px; } /* 让 chrome 支持 12px 以下的字体 */ @media screen and (-webkit-min-device-pixel-ratio:0){ #test{-webkit-text-size-adjust:none;font-size:1px;} }
=======
[ 提醒：你可先修正局部代码，再按Ctrl+A 全体抉择 ]
(责任编辑：网站建设)
如何让不固定个数的子元素自动适应居中相关文章