一.posotion:relative;

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>testUl居中</title>

    <style type="text/css">

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style: none;

        }

        .wrapper{

            float:left;

            position: relative;

            left:50%;

        }

        ul{

            position:relative;

            left:-50%;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul>

            <li>内容一</li>

            <li>内容为二</li>

            <li>内容三</li>

            <li>内容四</li>

        </ul>

    </div>

</body>

</html>

浏览器兼容性：IE8以上

若要兼容IE7在div外面再包裹一个div{position:relative;}

二.display:inline-block +text-align:center

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>testUl居中</title>

    <style type="text/css">

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style: none;

        }

        .wrapper{

            text-align: center;

        }

        ul{

            display:inline-block;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul>

            <li>内容一</li>

            <li>内容二</li>

            <li>内容三</li>

            <li>内容四</li>

        </ul>

    </div>

</body>

</html>

浏览器兼容性：IE8以上

三.diplay:table

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>testUl居中</title>

    <style type="text/css">

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style: none;

        }

        /*.wrapper{

            text-align: center;

        }*/

        ul{

             display:table;

             margin:0 auto;

        }

        li{

            display:table-cell;

        }

    </style>

</head>

<body>

    <!-- <div class="wrapper"> -->

        <ul>

            <li>内容一</li>

            <li>内容二</li>

            <li>内容三</li>

            <li>内容四</li>

        </ul>

    <!-- </div> -->

</body>

</html>

浏览器兼容性：不支持IE7以下版本的IE浏览器

四.display:inline-flex ＋ text-align:center

代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>testUl居中</title>

    <style type="text/css">

        *{

            margin:0;

            padding:0;

        }

        ul,li{

            list-style: none;

        }

        .wrapper{

            text-align: center;

        }

        ul{

            display:-webkit-inline-box;

            display:-moz-inline-box;

            display:-ms-inline-flexbox;

            display:-webkit-inline-flex;

            display:inline-flex;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <ul>

            <li>内容一</li>

            <li>内容二</li>

            <li>内容三</li>

            <li>内容四</li>

        </ul>

    </div>

</body>

</html>

浏览器兼容性：不支持IE7以下版本的IE浏览器

ul+li水平居中的几种方法的更多相关文章

  1. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

  2. li浮动时ul高度为0，解决ul自适应高度的几种方法

    网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...

  3. ul li 水平居中

    li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中.但这样可能在宽屏与窄屏的显示不一致.使用这种方法主 ...

  4. CSS垂直居中和水平居中的几种方法

    垂直居中 方法一 这个方法把div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性. <!DOCTYPE html> <html lang=" ...

  5. div垂直水平居中的四种方法总结

    5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...

  6. 水平居中的两种方法margin text-align

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. CSS3实现DIV垂直居中+水平居中的四种方法

    <div class="div1"> <div class="div2"></div> </div> html结 ...

  8. li排序的两种方法

    1.一般做法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  9. CSS水平居中的三种方法

    CSS中经常会用到元素居中,那么今天我为大家分享几种水平居中的方法,下面代码都可以达到同样的居中效果,来不及解释了,快上马(码): 一.margin : 0 auto; <head> &l ...

随机推荐

  1. 核态获取PsLoadedModuleList地址的稳定方法

    转载: https://blog.csdn.net/celestialwy/article/details/1261407     PsLoadedModuleList是Windows加载的所有内核模 ...

  2. JS正则校验

    /** 用途:检查输入字符串是否为空或者全部都是空格 输入:str:字符串 返回: 如果全是空返回true,否则返回false */ function isNull(str) { if (str == ...

  3. 10.15仿admin开发stark组件(一)

    2018-10-15 12:28:50 越努力,越幸运!永远不要高估自己! 低调做人,高调做事! 明天开stark项目!! admin 参考连接: http://www.cnblogs.com/yua ...

  4. day08 服务

    pasting ]注册电话的监听 tm.listen(new MyPhoneStateListener(), PhoneStateListener.LISTEN_CALL_STATE);     [4 ...

  5. Nordic NRF51822 从零开始系列（外部设备片—MPU6050DMP驱动的移植）

    一.硬件准备             (1)开发板和软件参看 Nordic NRF51822 从零开始系列(一)开发环境的搭建             (2)mpu6050模块 二.前置知识     ...

  6. db2 reorg到底需要多少表空间（转）

    脱机reorg需要一定的空间,这个空间与目标所在的数据表空间.索引表空间.以及临时表空间均有关,各空间需求的大小与表和索引所占用的数据页和索引页相关. (1)对表执行reorg操作如:db2 reor ...

  7. 为什么css定位雪碧图（合成图）都要以负号开头？

    (1)正常来说 定位坐标是以 合成图片 左上角这个点作为原点(0px,0px)开始读取的, 而你的图片全都在坐标系的 第四象限 background-position: x y:(x,y为数值或百分比 ...

  8. 数学用语中的 透明 transitive property

    1.透明 https://en.wikipedia.org/wiki/Equivalence_relation In mathematics, an equivalence relation is a ...

  9. 垃圾回收基本算法 内存管理 GC大统一理论

    <垃圾收集> (豆瓣) https://book.douban.com/subject/1157908/ 第1章 简介1．1 内存分配的历史1．1．1 静态分配1．1．2 栈分配1．1．3 ...

  10. HTTP协议之Transfer-Encoding

    HTTP协议中的Transfer-Encoding 浏览器和服务器端支持持久连接 持久连接(Persist Connection) HTTP1.0默认不是持久连接的 HTTP1.1默认是持久连接的 在 ...