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] Patching Array 补丁数组

    Given a sorted positive integer array nums and an integer n, add/patch elements to the array such th ...

  2. 【swift学习笔记】四.swift使用Alamofire和swiftyJson

    Alamofire是AFNetworking的swift版本,功能灰常强大. github:https://github.com/Alamofire/Alamofire SwiftyJSON是操作js ...

  3. .NET程序员细数Oracle与众不同的那些奇葩点

    扯淡 距上次接触 Oracle 数据库已经是 N 年前的事了,Oracle 的工作方式以及某些点很特别,那会就感觉,这货就是一个奇葩!最近重拾记忆,一直在折腾 Oracle,因为 Oracle 与众不 ...

  4. js兼容性

    1.getElementByClassName 在使用原生JavaScript时,获取类选择符时,即使用getElementByClassName,它在Firefox和IE下是不能兼容. Firefo ...

  5. Django Admin

    //设置admin列表名称 def __str__(self): return u'%s' % self.name class Meta: db_table ="数据库的那个表" ...

  6. 版本管理工具svn简介

    svn简介 SVN是一种C/S架构的版本管理软件 , 能够帮助我们保存开发过程中各个文件的所有历史版本, 你因此可以方便的找回软件的任何一个历史状态., 日常开发中经常用到. 安装使用 1.  在 u ...

  7. Linux编译工具：gcc入门

    1. 什么是gcc gcc的全称是GNU Compiler Collection,它是一个能够编译多种语言的编译器.最开始gcc是作为C语言的编译器(GNU C Compiler),现在除了c语言,还 ...

  8. PL/SQL异常获取

    1.no_data SET SERVEROUTPUT ON DECLARE pename EMP.ENAME % TYPE ; BEGIN SELECT ename INTO pename FROM ...

  9. 织梦DedeCMS

    DedeAMPZ服务器套件 http://dedeampz.dedecms.com/ DedeCMS  PHP开源网站管理系统  CMS系统 http://www.dedecms.com/produc ...

  10. [bigdata] kafka基本命令 -- 迁移topic partition到指定的broker

    版本 0.9.2 创建topic bin/kafka-topics.sh --create --topic topic_name --partition 6 --replication-factor ...