我赞美你品格高尚，崇敬你洁白无瑕。我爱你、想你、盼你，像对每一个季节那样。我爱你、想你、盼你，不管世俗的偏见怎样厉害。冬――四季之一的冬，你来吧！我喜欢你纯净的身躯，喜欢你严厉的性格，我要在你的怀抱中锻炼、奋斗、成熟……你可以和春天的万花，夏天的麦浪，秋天的瓜果……比美！
第一种方法，需要对包含li的ul增加一些样式（需要一些Hack），并且同时对外层的div设置text-align:center属性。 以上两项必须同时设置，否则不起作用，此时就可以达到我们的目的了。
第二种方法，对ul和li均设置position: relative的属性也可行。
在各浏览器中测试，均正常显示。
关键样式
复制代码
代码如下:display:inline-block; *display:inline; zoom:1;
测试代码
复制代码
代码如下:<div style="width: 300px; height: 28px; line-height: 28px; border: 1px solid #ccc; font-size: 12px; text-align: center;">
<ul style="list-style: none; margin: 0; padding: 0; float: left; position: relative; left: 50%;">
<li style="float: left; position: relative; right: 50%;">1.万年洪水</li>
<li style="float: left; position: relative; right: 50%; margin: 0 20px 0 20px;">2.千年洪水</li>
<li style="float: left; position: relative; right: 50%;">3.百年洪水</li>
</ul>
<div style="clear: both;"></div>
</div>
复制代码
代码如下:<div style="width: 300px; height: 28px; line-height: 28px; border: 1px solid #ccc; font-size: 12px; text-align: center;">
<ul style="list-style: none; margin: 0; padding: 0; display: inline-block; *display: inline; zoom: 1;">
<li style="float: left;">1.万年洪水</li>
<li style="float: left; margin: 0 20px 0 20px;">2.千年洪水</li>
<li style="float: left;">3.百年洪水</li>
</ul>
<div style="clear: both;"></div>
</div>
以上就是具有Float属性的元素依然居中。人最坏的习惯之一就是抱住已经拥有的东西不放，其实一个人只要舍得放下自己的那点小天地，就很容易走进宇宙的大世界。这个世界为你准备的精彩很多。更多关于具有Float属性的元素依然居中请关注haodaima.com其它相关文章！
![css3学习之2D转换功能详解]("mary.gif)
![CSS3区域模块region相关编写示例]("img/stat.jpg)
![css如何实现的让图片垂直居中的方法]("images/demo.jpg)
