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 ...
随机推荐
- vue封装第三方插件并发布到npm
前言 写此文前特意google了一下,因为有较详细的开发教程我再写意义不大,有把插件封装成组件的教程,有把自己的组件封住成插件的教程,本文主要说明如何把第三方的插件封装成vue插件,简化配置,一键安装 ...
- Git工作流程最佳实践总结
Git作为一个目前非常流行的版本管理工具,深受开发者的喜爱.那么怎样才能将Git的作用发挥的更好呢?我根据实际的项目经验,归纳总结了以下Git工作流的最佳实践.这里所谓的最佳,是经过多次项目经验后,根 ...
- Linux虚拟机安装应用程序提示Graphical installers are not supported by the vm
Linux安装应用程序提示Graphical installers are not supported by the vm 参考链接:http://www-01.ibm.com/support/doc ...
- [原]openstack-kilo--issue(十二)openstack-keystone和httpd服务同时占用35357和5000
本博客已经添加"打赏"功能,"打赏"位置位于右边栏红色框中,感谢您赞助的咖啡. == Keystone service == openstack-keyston ...
- Orleans学习总结(一)--入门认识
最近这段时间接触了些新的东西:Orleans框架.今天是春节前最后一天班,把我这段时间学习的东西总结一下分享给大家. 一.什么是Orleans (文档地址.这里我就直接翻译官方的介绍,有点地方翻译的有 ...
- 10.14 预订会议室的小Demo
2018-10-14 17:12:32 越努力,越幸运.永远不要高估自己! 网上修改一下博客网站样式,做个仿qq空间的! 放上github连接 :https://github.com/TrueNewB ...
- Solr7.4.0的API（Solrj）操作及项目中的使用
一.SolrJ的概念 solr单机版服务搭建:https://www.cnblogs.com/frankdeng/p/9615253.html solr集群版服务搭建:https://www.cnbl ...
- at MySql.Data.MySqlClient.MySqlStream.ReadPacket 或 FUNCTION account.AddMinutes does not exist
Application Exception MySql.Data.MySqlClient.MySqlException FUNCTION account.AddMinutes does not exi ...
- 实际体验 .NET Standard 2.0 的魅力
在我们的 .net core 大迁移工程中,有些项目完成了迁移,有些还未迁移,这就带来了一个烦恼——我们自己开发的公用类库如何在 .net core 与 .net framework 项目中共享?如果 ...
- robot framework教程-------虫师
http://www.testclass.net/2017/09/28/happy-holidays/