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浏览器
ul+li水平居中的几种方法的更多相关文章
- css实现垂直水平居中的5种方法
css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...
- li浮动时ul高度为0，解决ul自适应高度的几种方法
网址:http://www.gxchina.com/edu/11208.html 1.给ul元素设置高度height最直接的办法是给ul元素设置一个高度,即ul标签添加height属性,代码如下: u ...
- ul li 水平居中
li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中.但这样可能在宽屏与窄屏的显示不一致.使用这种方法主 ...
- CSS垂直居中和水平居中的几种方法
垂直居中 方法一 这个方法把div 的显示方式设置为表格,因此我们可以使用表格的 vertical-align属性. <!DOCTYPE html> <html lang=" ...
- div垂直水平居中的四种方法总结
5.利用弹性布局 与 margin: <style> .container{ height: 600px; width: 600px; border:1px solid black; di ...
- 水平居中的两种方法margin text-align
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS3实现DIV垂直居中+水平居中的四种方法
<div class="div1"> <div class="div2"></div> </div> html结 ...
- li排序的两种方法
1.一般做法 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- CSS水平居中的三种方法
CSS中经常会用到元素居中,那么今天我为大家分享几种水平居中的方法,下面代码都可以达到同样的居中效果,来不及解释了,快上马(码): 一.margin : 0 auto; <head> &l ...
随机推荐
- IDEA自动编译设置
ctrl+alt+s: ctrl+shift+alt+/:
- [原]openstack-kilo--issue(九) heat stacks topology中图形无法正常显示
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. ======声明======= 欢迎转载:转载请注明出处 http://www. ...
- Orleans学习总结(三)--持久化篇
经过上篇Orleans学习总结(二)--创建工程的介绍,我们的工程已经跑起来了,下面我们来介绍下持久化相关. 关于持久化的文档地址在这http://dotnet.github.io/orleans/D ...
- mvc4安装、新建、模版简介
第一安装 mvc4 1.Visual Studio 2012本身就包含MVC4另外无需安装. 2.Vs2010 需要安装vs2010 sp1补丁,后再安装mvc4安装包(官网下载即可) 第二 创建mv ...
- day_6.21web框架编写
web框架都是相同,只需把某些东西改写!就可以为自己所用! 直接实现改写,补充东西!然后,就是输入一个路径,然后执行方法!!!! 更改路由,然后调用方法就好!
- hadoop 使用ip配置导致hdfs启动失败
dataNode 有守护进行,但hdfs web页面上显示没有live node. 错误日志: 2017-06-21 17:44:59,513 ERROR org.apache.hadoop.hdfs ...
- 洛谷 P1583魔法照片 & P1051谁拿了最多奖学金 & P1093奖学金
题目:https://www.luogu.org/problemnew/show/P1583 思路:sort sort sort //#include<bits/stdc++.h> #in ...
- 移位运算符：<<,>>,>>>总结
位移总结篇:带demo讲解 https://www.cnblogs.com/yyangblog/archive/2011/01/14/1935656.html
- {python之IO多路复用} IO模型介绍 阻塞IO(blocking IO) 非阻塞IO(non-blocking IO) 多路复用IO(IO multiplexing) 异步IO(Asynchronous I/O) IO模型比较分析 selectors模块
python之IO多路复用 阅读目录 一 IO模型介绍 二 阻塞IO(blocking IO) 三 非阻塞IO(non-blocking IO) 四 多路复用IO(IO multiplexing) 五 ...
- ubuntu下pig报错ERROR 2999: Unexpected internal error. Failed to create DataStorage的解决
2019-03-04 00:10:03,998 [main] ERROR org.apache.pig.Main - ERROR 2999: Unexpected internal error. Fa ...