html+css--水平居中总结-不定宽块状元素方法
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html+css--水平居中总结-不定宽块状元素方法相关的知识，希望对你有一定的参考价值。
来源：http://www.imooc.com/code/6365
除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。
方法三：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
举例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .container{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} /*下面是代码任务区*/ .wrap{ clear:both; float:left; position:relative; left:50%; } .wrap-center{ background:#ccc; position:relative; margin:0; left:-50%; } </style> </head> <body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> <!--下面是代码任务区--> <div class="wrap"> <div class="wrap-center">我们来学习一下这种方法。</div> </div> </body> </html>
结果如下图：
以上是关于html+css--水平居中总结-不定宽块状元素方法的主要内容，如果未能解决你的问题，请参考以下文章