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] Maximum Product of Word Lengths 单词长度的最大积

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  2. JS组件系列——BootstrapTable+KnockoutJS实现增删改查解决方案（四）：自定义T4模板快速生成页面

    前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一个什么工具直接生成页面效果,啥代码都不用写了,那该多爽.于是研究了下T4 ...

  3. 如何在ASP.NET Core中实现一个基础的身份认证

    注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET Core中实现一个基础的身份认证 ...

  4. Dao跨事务调用实现转账功能

    1.首先在数据库当中创建数据库,并且创建它的 实现类 package com.beiwo.epet.entity; public class Account { private int id; pri ...

  5. SOD让你的旧代码焕发青春

    最近接手了一个旧的系统,各种陈旧的问题比较多,其中最棘手的就是操作数据库的部分,具体如下: 1.核心库是一个最后修改时间为2008年的库,先不说有多陈旧,现在这个库只是一个DLL文件,没有源码,也已经 ...

  6. 【BZOJ-3998】弦论 后缀自动机

    3998: [TJOI2015]弦论 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 2018  Solved: 662[Submit][Status] ...

  7. EventDispatcher 事件分发组件

    引言 考虑这样一个问题,现在你想给为你的项目提供一个插件系统,插件可以添加一些方法,或者在某些方法执行之前或者之后做些事情,而不干扰其他插件.要实现这个系统,简单的单继承不是个好办法,即使多继承在PH ...

  8. 统一的Json组件和csv下载组件

    java-web-common java-web-common Json组件 目标和用途 规范Json接口格式 Controller中一律返回Java object,组件将自动转换数据格式,满足Jso ...

  9. Python环境配置安装

    2016年12月20日14:15:23 -------------- 参考菜鸟教程: Python 环境搭建 | 菜鸟教程  http://www.runoob.com/python/python-i ...

  10. validate表单验证插件

    1.引入validate.js包 <script src="xx/xx/jquery.validate.min.js"></script> 2.表单验证 / ...