一.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. mui---子页面主动调用父页面的方法

    我们在做APP的时候,很多时候会有这样的功能需求,例如:登录,充值,如果登录成功,或充值成功后,需要更改当前页面以及父页面的状态信息,就会用到在子页面调用父页面的方法来实现:在子页面刷新父页面的功能. ...

  2. E - Train Problem I

    As the new term comes, the Ignatius Train Station is very busy nowadays. A lot of student want to ge ...

  3. Android开发实战(申明：来源于网络)

    Android开发实战(申明:来源于网络) 地址:http://so.csdn.net/so/search/s.do?q=Android%E5%BC%80%E5%8F%91%E5%AE%9E%E6%8 ...

  4. NFS使用autofs自动挂载

    NFS自动挂载设置在/etc/fstab和/etc/rc.local可能挂载不成功,假如是服务端NFS宕机还可能导致客户端无法启动,可以使用autofs实现自动挂载 安装autofs yum -y i ...

  5. 洛谷P1057 传球游戏【dp】

    题目:https://www.luogu.org/problemnew/show/P1057 题意: n个人围成一个圈,传球只能传给左边或是右边. 从第一个人开始传起,经过m次之后回到第一个人的传球方 ...

  6. .NET Core下的Socket示例.

    About.schtml中的代码 @{ ViewData["Title"] = "About"; } <h2>@ViewData["Tit ...

  7. 深入 Vue 生命周期

    深入 Vue 生命周期 这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 1.单组件的生命周期 2.父子组件的生命周期 3.兄弟组件的生命周期 4.宏mixin的生命周 ...

  8. Runtime Services

    Python Runtime Services — Python 3.7.2 documentation https://docs.python.org/3/library/python.html

  9. [Day5]方法

    1.方法 (1)概念:方法就是用来完成解决某件事情或实现某个功能的办法 会包含很多条语句用于完成某些有意义的功能 通过在程序代码中引用方法名称和所需的参数,实现在该程序中执行(或称调用)该方法 (2) ...

  10. [security] security engine things

    1. luarock luarock 之于 lua,就好比 pip 之于 python https://luarocks.org/ 2.  lua的库 [root@base package]# ls ...