zoukankan html css js c++ java

ul+li水平居中的几种方法

一.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浏览器

查看全文

相关阅读:
iOS之内存管理（ARC）
分布式锁1 Java常用技术方案
 谈谈如何使用Netty开发实现高性能的RPC服务器
 前后端分离开发模式下后端质量的保证 —— 单元测试
 jquery实现"跳到底部"，"回到顶部"效果
 html内容超出了div的宽度如何换行让内容自动换行
 采用easyui+ajax+htm+ashx编写通过用户对应角色角色对应菜单控制用户的访问权限
 javascript [] 与 {} 的区别
 图说设计模式
 T4教程1 T4模版引擎之基础入门

原文地址：https://www.cnblogs.com/keleyz/p/5065966.html