一.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. MFC AfxMessageBox(_T("Please Load Rawdata First !"));

    AfxMessageBox(_T("Please Load Rawdata First !"));

  2. [原]jenkins(五)---jenkins添加项目

    /** * lihaibo * 文章内容都是根据自己工作情况实践得出. http://www.cnblogs.com/horizonli/p/5332258.html 版权声明:本博客欢迎转发,但请保 ...

  3. Java NIO学习笔记---I/O与NIO概述

    文章目录: 1.什么是IO 2.什么是Java NIO 3.I/O常见概念 4.为什么使用NIO 5.IO VS NIO 一.什么是IO I/O 或者输入/输出 , 指的是计算机与外部世界或者一个程序 ...

  4. java编程感悟02

    很多时候我们需要网上查阅他人的代码,如果代码比较长或者注释较少,阅读起来就会比较费劲,这时需要培养快速读懂应用他人的代码的能力. 实现图片的旋转功能: import java.awt.geom.Aff ...

  5. A - 小孩报数问题

    有N个小孩围成一圈,给他们从1开始依次编号,现指定从第W个开始报数,报到第S个时,该小孩出列,然后从下一个小孩开始报数,仍是报到S个出列,如此重复下去,直到所有的小孩都出列(总人数不足S个时将循环报数 ...

  6. python中的风险

    from math import e print(e) e = "中华人民共和国1" print(e) 输出: 2.718281828459045 中华人民共和国1 用from方式 ...

  7. RabbitMQ的Q&A

    默认的IP端口 amqp默认绑定IP(本机所有IP),端口:5672 clustering默认绑定IP(本机所有IP),端口:25672 RabbitMQ Management插件 (本机所有IP), ...

  8. Dijkstra's algorithm

    小结: 1.图论 两点间最短路径 https://en.m.wikipedia.org/wiki/Dijkstra%27s_algorithm Dijkstra's algorithm to find ...

  9. 2016年蓝桥杯省赛A组c++第2题(暴力求解)

    /* 某君从某年开始每年都举办一次生日party,并且每次都要吹熄与年龄相同根数的蜡烛. 现在算起来,他一共吹熄了236根蜡烛. 请问,他从多少岁开始过生日party的? 请填写他开始过生日party ...

  10. 函数调用的方法一共有 4 种,call,apply,bind

    1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法. 2. 相同点:这两个方法的作用是一样的. 都是在特定的作用域中调用函数,等于设置函数体内this对象的值,以扩充函数赖 ...