一.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. Web上传文件的原理及实现

    现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...

  2. 如何用Baas快速在腾讯云上开发小程序-系列1：搭建API & WEB WebSocket 服务器

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/221059001487422606 来源:腾云阁 h ...

  3. bash 的相关配置

    bash 参数自动补全 请安装 bash-completion bash 提示符 说明:参考文档 1. 简洁风格 if [[ ${EUID} == 0 ]] ; then PS1='\[\033[01 ...

  4. .Net Windows Service(服务) 调试安装及System.Timers.Timer 使用

    Windows Service(服务)  是运行在后台的进程 1.VS建立 Windows 服务(.NET Framework) 2.添加Timer 双击Service1.cs可以拖控件(System ...

  5. 删除一个cjson导致系统死机

    一个未使用,未分配的cjson指针应该被删除,如果尝试删除一个 未分配,未启用的cjson将导致内存出错,死机.

  6. OLW Test

    第一篇使用Open Live Writer 发布测试. Code Insert: #include <stdio.h> main() { printf("Hello World! ...

  7. 关于ionic如何到最新版本

    首先删除 我叫他它叫做依赖node_modules 文件夹然后修改 修改依赖版本package.json 各个文件的版本号接着下载 下载最新的依赖 会根据package.json 各个文件的版本号添加 ...

  8. MySQL transaction

    MySQL transaction(数据库的事务) 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作. 要么完全执行,要么完全地不执行. ACID 事务 ...

  9. Chap2:二进数值与记数系统[Computer Science Illuminated]

    1 基数(base):记数系统的基本数值,规定了这个系统中使用的数字量和数位位置的值 2 数字采用位置计数法进行编写 位置计数法(positional notation):一种表达数字的系统,数位按顺 ...

  10. H2O 网址

    使用pysparking的一个例子 http://docs.h2o.ai/h2o-tutorials/latest-stable/tutorials/sparkling-water/index.htm ...