一.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. SpringMVC中 -- @RequestMapping的作用及用法

    一.@RequestMapping 简介 在Spring MVC 中使用 @RequestMapping 来映射请求,也就是通过它来指定控制器可以处理哪些URL请求,相当于Servlet中在web.x ...

  2. Android_照相机Camera_调用系统照相机返回data为空

    本博文为子墨原创,转载请注明出处! http://blog.csdn.net/zimo2013/article/details/16916279 1.调用系统照相机 [java] view plain ...

  3. PHP开启伪静态（AppServ服务器）

    mod_rewrite是Apache的一个非常强大的功能,它可以实现伪静态页面.下面我详细说说它的使用方法 1.检测Apache是否支持mod_rewrite 通过php提供的phpinfo()函数查 ...

  4. php: Cannot send session cache limiter

    修改php.ini中的session.auto_start = 0 为 session.auto_start = 1 MAC 的php.ini 在 /private/etc/ 目录下修改的时候发现su ...

  5. Linux----知识储备

    ----------------------------------------------------------------------基础---------------------------- ...

  6. C#网页采集数据的几种方式(WebClient、WebBrowser和HttpWebRequest/HttpWebResponse)

    一.通过WebClient获取网页内容 这是一种很简单的获取方式,当然,其它的获取方法也很简单.在这里首先要说明的是,如果为了实际项目的效率考虑,需要考虑在函数中分配一个内存区域.大概写法如下 //M ...

  7. thymeleaf 标签的使用

    1.html页面 2.<label class="control-label col-sm-1" for="vehiclesFormalities"> ...

  8. 泡泡一分钟：Towards real-time unsupervised monocular depth estimation on CPU

    Towards real-time unsupervised monocular depth estimation on CPU Matteo Poggi , Filippo Aleotti , Fa ...

  9. {MySQL存储引擎介绍}一 存储引擎解释 二 MySQL存储引擎分类 三 不同存储引擎的使用

    MySQL存储引擎介绍 MySQL之存储引擎 本节目录 一 存储引擎解释 二 MySQL存储引擎分类 三 不同存储引擎的使用 一 存储引擎解释 首先确定一点,存储引擎的概念是MySQL里面才有的,不是 ...

  10. Codeforces 44E - Anfisa the Monkey - [水题]

    题目链接:http://codeforces.com/problemset/problem/44/E 题意: 给一个字符串,让你分割成 $k$ 行,每行的字母数在 $[a,b]$ 之间. 题解: 这是 ...