浮动元素居中法

1.现代浏览器浮动元素居中

text-align:center;
display:inline-block;

2.兼容ie6的浮动元素居中法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面浮动元素的水平居中</title>
<style type="text/css">

    .clearfix:after {}{ content:""; height:0; visibility:hidden; display:block; clear:both; }
    .clearfix {}{ zoom:1; }

    .wrap {}{ margin:20px auto; padding:10px 0; background:orange; overflow:hidden; position:relative; }
    /**//** relative left 50% */
    .page {}{ float:left; position:relative; left:50%; }
    /**//** relative right 50% */
    .page li {}{ float:left; position:relative; right:50%; overflow:hidden; margin:0 5px; }

</style>
</head>
<body>
<div class="wrap clearfix">
    <ul class="page">
        <li> 上一页</li>
        <li>1 </li>
        <li>2</li>
        <li>3</li>
        <li>下一页 </li>
    </ul>
</div>

</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,686评论 1 92
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 12,531评论 3 30
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,582评论 0 8
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 8,931评论 1 19
  • 我发现每每迷茫的时候,总是玩手机到深夜,还常常找成人网站,看完就睡不着了,你有过吗? 为了音乐梦,我找了间一个月2...
    杨啸啸阅读 1,391评论 0 0