慕课网上的HTML/CSS教程css
http://www.imooc.com/view/9
html
其中有三种方法spa
第一种是加入table标签3d
任务是实现div元素的水平居中,code
初始代码以下htm
<div> 设置我所在的div容器水平居中 </div>
<table> <tbody> <tr><td><div> 设置我所在的div容器水平居中 </div> </td></tr> </tbody> </table>
即在上面的初始代码里添加类来实现居中blog
<div class="wrap"> 设置我所在的div容器水平居中 </div>
css代码教程
<style> .wrap{text-align:center;} </style>
下面一段话是摘抄与慕课网utf-8
【1】【方法三:经过给父元素设置 float,而后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
咱们能够这样理解:假想ul层的父层(即下面例子中的div层)中间有条平分线将ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的最左端(也是div层的平分线)对齐,从而实现li层的居中。】
给出的代码以下get
<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; } </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> </body> </html>
上面的代码先来分析style部分,为了直观的展示出left:50,left:-50,在每一个类中添加border,以下
<style> .container{ float:left; border:2px red solid; position:relative; left:50% } .container ul{ list-style:none; border:2px blue solid; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:20px; border:2px green solid; } </style>
红色的为第一层,即div层,向右偏移了50%,起点变成了中间线,并非居中显示;
而后是蓝色的ul层,相对于div层向左偏移50%,这里假设ul没充满,如上图,ul是相对于中间线偏移自身50%,即ul层是居中的;
最后来看li,也就是绿色的那层,li是写在ul里的,固然是居中的了,至于其是container的子类,我以为没有必要
不过上面令我奇怪的是float,由于li是块状元素,1,2,3应该是分别独立于三行的,当我将display:inline删除的时候,发现仍然没有什么改变,因而查了float的知识,
特摘抄于下
【2】【设了float:left的元素容许它的右边存在任何元素同行显示,不管是内联元素仍是块元素。但它的左边仍是不容许存在任何元素与之同行显示,哪怕其它的元素的代码在前,除非也给前面的元素加上float:left后,才容许同行显示。
设了display:inline的元素,容许它的先后存在其它的内联元素同行显示。关于代码在其前面的块元素之同行显示,则要让前面的元素浮动(无论是左仍是右浮动)或设为display:inline,还有代码在后面的是块元素(管它有没有浮动,是左浮动仍是右浮动),均不能与之同行,除非设为display:inline。】
课程的最后也提到了float,使用此标签的元素变为inline-block,即内联块状元素
参考