今天做项目的时候碰到了不固定元素个数，需要水平居中的问题，原来的确定宽度下margin:0 auto等方法木有用了。想起来之前看过display：inline-block的文章，
果断用这个。
之前很少用这个属性。。印象里麻烦比较多。。好了不多说了，上代码。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>center</title> 6 <style> 7 .content-wrapper{ 8 text-align: center; 9 } 10 11 .content-wrapper ul li{ 12 display: inline-block; 13 border: 1px black solid; 14 } 15 16 17 </style> 18 </head> 19 <body> 20 <div class="content-wrapper"> 21 <ul> 22 <li>hello kitty</li> 23 <li>hello kitty</li> 24 <li>hello kitty</li> 25 </ul> 26 </div> 27 </body> 28 </html>
打开页面，乍一看居中了！！
等等，好像有点奇怪，出现了空白
一般这个奇奇怪怪的空白都是文本节点元素惹的祸。。换行符哟，不信你把li都弄一行里。。
好，解决方法就是在wrapper中定义font-size:0;对于里面需要定义字体大小的元素再挨个手动定义一遍。。。
然后为了兼容ie6/7需要做点hack处理。。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>center</title> <style> .content-wrapper{ text-align: center; font-size: 0; } .content-wrapper ul li{ display: inline-block; *display: inline; *zoom:1; border: 1px black solid; font-size: 16px; } </style> </head> <body> <div class="content-wrapper"> <ul> <li>hello kitty</li> <li>hello kitty</li> <li>hello kitty</li> </ul> </div> </body> </html>
好了，完成了！li元素可以用后端代码进行迭代生成了~