参考 http://www.aiubug.com/?p=427
以及 http://www.tcreator.info/cnBootstrap/cnDocs/solutions/float-center.html
http://stackoverflow.com/questions/7756926/difference-between-span-and-div-with-text-aligncenter
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="zh-cn" lang="zh-cn" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <head> <style> ul,li{ margin:0; padding:0; list-style:none; } #macji{ width:100%; height:80px; background-color:#eee; text-align:center; overflow:hidden; } #macji .macji-skin{ float:left; position:relative; left:50%; } #macji .macji-skin li{ float:left; margin:10px; padding:0 10px; position:relative; right:50%; /*这里的right不好理解的话看不固定居中方式2*/ line-height:60px; /*li虽然是块级元素 同时又被成为内联元素 所以可以用line-height开撑高度*/ /* 所以使用height也是可以更改li的高度的 但是没有line-height好 因为使用line-height的同时 li中的字可以垂直居中(如果只有一行字的话)*/ border:solid 1px #000; } </style> <style type="text/css"> .fixed_width{ height: 30px; width: 60%; margin: 0 auto; background-color: green; } .nav{ padding-bottom: 50px; } .nav_item{ float: left; margin:10px; padding:0 10px; border:solid 1px #000; } .unknown_width_wrapper{ float: left; position: relative; left: 50%;/*使用left必须是position不是static的情况下才有效 position默认值是static*/ /*这里的left是使本元素从其父元素中间的位置才开始 虽然你现在觉得奇怪 那不就是中间偏后的位置嘛 不居中啊 看后面就知道了*/ /*最外层的元素没有设定width 因为我们不知道它应该有多宽 因为内容宽度不固定 它的宽度最终是由内部div的宽度决定的 在推算的时候 假设一个值就好*/ } .unknown_width_inner{ position: relative; left: -50%; /* 这里又设定相对于刚才的父div的-50%的位置开始 本div也没有设置宽度 因为它的宽度是根据其内容决定的 而其父div的宽度又根据本div决定 所以本div宽度和父div宽度一致 从草图上看 又向左边移动了其父亲div的50% 就刚好在nav中居中了*/ float: left; } .unknown_width_inner2{ position: relative; right: 50%;/*首先其父元素 方才已经分析过 来到了相对于nav中间偏后的位置 这里我只要设定好整个需要居中元素的末尾位置限就可以 也就是right要空出50%的位置*/ float: left; /*当然了这里float:right;也可以*/ } .tablecell{ display: table-cell; text-align: center; } .item{ display: inline-block; } </style> </head> <body> <h1>跨浏览器实现float:center，No CSS hacks</h1> <div>浮动元素水平居中</div> <div id="macji"> <ul class="macji-skin"> <li>列表一,我是浮动的</li> <li>列表二</li> <li>列表三</li> <li>这里可能是N</li> </ul> </div> <div class=''> <div>固定宽度的块元素居中 margin:0 auto;</div> <div class='fixed_width'> </div> </div> <div class='nav'> <div class='unknown_width'>不定宽度元素居中 align center 可以对display:inline-block起作用</div> <div class='' style="text-align:center;"> <div class='items'><!-- 对其中的item起作用 而不是items --> <div class='item'>list 1</div> <div class='item'>list 2</div> <div class='item'>list many</div> </div> </div> </div> <div class='nav'> <div class='unknown_width'>不定宽度元素居中</div> <div class='unknown_width_wrapper'> <div class='unknown_width_inner'> <div class='items'> <div class='item'>list 1</div> <div class='item'>list 2</div> <div class='item'>list many</div> </div> </div> </div> </div> <div class='nav'> <div class='unknown_width'>不定宽度元素居中 方式2</div> <div class='unknown_width_wrapper'> <div class='unknown_width_inner2'> <div class='items'> <div class='item'>list 1</div> <div class='item'>list 2</div> <div class='item'>list many</div> </div> </div> </div> </div> </body> </html>
关于text-align
参考http://www.w3help.org/zh-cn/causes/RT8003
根据 CSS 2.1 规范中的描述，'text-align' 特性描述了一个块的行内内容的对齐方式。'text-align' 特性具备继承性，可以应用于块级元素、表格单元格及行内块级元素。
也就是说，'text-align' 可以应用到块级元素、表格单元格及行内块级元素上，但仅对它们的行内内容起作用。
但是对于IE6 IE7 IE8(Quirk mode)中 text-align可以应该该块中所有元素的排布 包括块元素