CSS中不定宽块状元素的水平居中显示

慕课网上的HTML/CSS教程

http://www.imooc.com/view/9

其中有三种方法

第一种是加入table标签

任务是实现div元素的水平居中，

初始代码如下

  1. <div>
  2. 设置我所在的div容器水平居中
  3. </div>

使用table标签实现的代码如下

  1. <table>
  2. <tbody>
  3. <tr><td><div>
  4. 设置我所在的div容器水平居中
  5. </div>
  6. </td></tr>
  7. </tbody>
  8. </table>

第二种方法是将其设置为内联元素，通过父类来修改

即在上面的初始代码里添加类来实现居中

  1. <div class="wrap">
  2. 设置我所在的div容器水平居中
  3. </div>

css代码

  1. <style>
  2. .wrap{text-align:center;}
  3. </style>

第三种方法在慕课网上讲解的有点绕，着重讲一下

下面一段话是摘抄与慕课网

【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层的居中。】

给出的代码如下

  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>不定宽块状元素水平居中</title>
  5. <style>
  6. .container{
  7. float:left;
  8. position:relative;
  9. left:50%
  10. }
  11. .container ul{
  12. list-style:none;
  13. margin:0;
  14. padding:0;
  15. position:relative;
  16. left:-50%;
  17. }
  18. .container li{float:left;display:inline;margin-right:8px;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <div class="container">
  24. <ul>
  25. <li><a href="#">1</a></li>
  26. <li><a href="#">2</a></li>
  27. <li><a href="#">3</a></li>
  28. </ul>
  29. </div>
  30. </body>
  31. </html>

先不用管其中的float:left

上面的代码先来分析style部分，为了直观的展现出left:50,left:-50，在每个类中添加border，如下

  1. <style>
  2. .container{
  3. float:left;
  4. border:2px red solid;
  5. position:relative;
  6. left:50%
  7. }
  8. .container ul{
  9. list-style:none;
  10. border:2px blue solid;
  11. margin:0;
  12. padding:0;
  13. position:relative;
  14. left:-50%;
  15. }
  16. .container li{float:left;display:inline;margin-right:20px;
  17. border:2px green solid;
  18. }
  19. </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，即内联块状元素

参考

【1】http://www.imooc.com/code/6365

【2】http://zhidao.baidu.com/question/253828906.html

CSS中不定宽块状元素的水平居中显示的更多相关文章

  1. html+css--水平居中总结-不定宽块状元素方法（三）

    来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...

  2. html+css--水平居中总结（不定宽块状元素方法）（一）

    来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度 ...

  3. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  4. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  5. html+css-水平居中-不定款块状元素方法（二）

    来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...

  6. html+CSS--水平居中设置（定宽块状元素）

    来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...

  7. 【css】主要的块状元素(block element)和内联元素(inline element行内元素)

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   display可以强制转换行内元素和块状元素,还可以取消显示none   块元素(bloc ...

  8. css中固定宽高div与不固定宽高div垂直居中的处理办法

    固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...

  9. css中的流，元素，基本尺寸

    流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...

随机推荐

  1. 【三石jQuery视频教程】01.图片循环展示

    视频地址:http://v.qq.com/page/e/5/t/e0149n5he5t.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  2. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  3. 文件共享锁定数溢出-IWorkspaceEdit.StopEditing

    在批量保存Feature至本地mdb的时候,当Feature的数量超过一定的值(该值不确定是不是Access文件的MaxLocksPerFile值,因为当MaxLocksPerFile为9500时,F ...

  4. BZOJ 2879: [Noi2012]美食节

    2879: [Noi2012]美食节 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 1834  Solved: 969[Submit][Status] ...

  5. W3Help-兼容性-知识库

    http://www.w3help.org/zh-cn/kb/ clear:none/left/right/both/inherit该特性表明元素框的哪一边不可以和先前的浮动框相邻.'clear' 特 ...

  6. mybatis-generator运行命令

    java -jar mybatis-generator-core-x.x.x.jar -configfile generatorConfig.xml -overwrite

  7. Mac安装mysql

    ### 第一步 安装后一定要记住初始密码 ### 第二步 打开终端 cd /usr/local/mysql/bin ./mysql -u root -p #输入初始密码 set password = ...

  8. Java虚拟机浅探

    简介 对于java开发人员了来说,对java虚拟机肯定有着或多或少的了解.因为有了虚拟机的存在,才会使得java的内存管理变得那么方便,不再像C++那样使用new/delete来直接管理内存.知名的j ...

  9. javascript的正则表达式学习

    关于反向引用 复制代码 代码如下: // 测试函数 function matchReg(reg, str) { var result = str.match(reg); if(result) { co ...

  10. iMac 升级到10.12后，蓝牙不能用

    解决办法: 断开所有外接USB包括,自带的与Magic Keyboard连接那根线. 再重新启动,就好了. 引用:http://www.jianshu.com/p/87e25a072623