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. [LeetCode] Binary Tree Level Order Traversal 二叉树层序遍历

    Given a binary tree, return the level order traversal of its nodes' values. (ie, from left to right, ...

  2. [LeetCode] Gray Code 格雷码

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  3. IT培训行业揭秘（四）

    IT培训班的老师前面已经说过,很多都是从一线程序员岗位转过来的,因为培训行业的收入整体上来看还是比作普通程序员要高一些,这是市场的普遍行情.还有一部分老师从培训班学习过并且留到培训班任教的.一般这种老 ...

  4. MVC系列——MVC源码学习：打造自己的MVC框架（二：附源码）

    前言:上篇介绍了下 MVC5 的核心原理,整篇文章比较偏理论,所以相对比较枯燥.今天就来根据上篇的理论一步一步进行实践,通过自己写的一个简易MVC框架逐步理解,相信通过这一篇的实践,你会对MVC有一个 ...

  5. C#扩展方法

    扩展方法使您能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型. 扩展方法就相当于一个马甲,给一个现有类套上,就可以为这个类添加其他方法了. 马甲必须定义为stati ...

  6. Winscp开源的SSH|SFTP

    WinSCP 主要功能 图形用户界面 多语言与 Windows 完美集成(拖拽, URL, 快捷方式) 支持所有常用文件操作,支持基于 SSH-1.SSH-2 的 SFTP 和 SCP 协议 支持批处 ...

  7. IOS跑马灯效果，实现文字水平无间断滚动

    ViewController.h #import <UIKit/UIKit.h> @interface ViewController : UIViewController{ NSTimer ...

  8. Beta版本冲刺第三天

    Aruba 408 409 410 428 429 431 完成任务: 分类界面,实现手动新增/删除分类 分类界面,设置确定和取消按钮的intent 实现图片在编辑界面导入并合理摆放 立会照片: 燃尽 ...

  9. springMVC的bean注入方式

    POJO是多例模式,并不是单例模式. servlet是单例的,同一个实例可以同时有多个用户访问 用单例,是因为没必要每个请求都新建一个对象,这样子既浪费CPU又浪费内存:用多例,是为了防止并发问题:单 ...

  10. mysql主从复制操作步骤

    注: .做主从复制的两台服务器server-id不能相同 .主从的字符集要一样,不然数据导入会报错 .开启db01的log-bin功能 [root@db01 mysql]# vim /etc/my.c ...