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

时间：2022-06-12 00:26:51

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>

显示的结果图如下

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

红色的为第一层，即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&plus;css--水平居中总结-不定宽块状元素方法（三）

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

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

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

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

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

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

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

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

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

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

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

  7. 【css】主要的块状元素&lpar;block element&rpar;和内联元素&lpar;inline element行内元素&rpar;

      内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用   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. mysql 表表连接的问题。

    select * from table a, table b where a.aid = b.bid and aid >100 这样连接,如果a有数据,b没有数据,  a.aid = b.bid ...

  2. Bash 的 no-fork 优化

    我们知道,Bash 在执行一个外部命令时,会先 fork() 一个子进程,然后在子进程里面执行 execve() 去加载那个外部程序.fork 子进程是会耗性能的,所以 Bash 会在下面几种情况下不 ...

  3. DateSort选择法、冒泡法排序

    public class DateSort {public static void main(String args[]) {Date d[] = new Date[11];d[0] = new Da ...

  4. ruby语言是什么东西

    1.简介    Ruby是日本的Yukihiro Matsumoto写的,简单易学的面向对象的脚本语言,像perl一样,有丰富的文字处理.系统管理等丰富 功能,但是ruby要简单,容易理解和扩充.跟p ...

  5. ASP&period;NET MVC中HttpContext&comma; HttpContextBase&comma; HttpContextWrapper联系

    ttpContext HttpContext是最原始的ASP.NET Context. MVC的目的之一是能够单元测试.HttpContext没有base class,并且不是virtual,所以不能 ...

  6. HttpModule的基本概念

    注:本文为个人学习摘录,原文地址:http://www.cnblogs.com/stwyhm/archive/2006/08/09/471765.html HttpModule是如何工作的 当一个HT ...

  7. vue页面无操作10分钟内调转到登录页面

    https://blog.csdn.net/lbPro0412/article/details/83864454 页面在设定时间内无任何操作(鼠标的点击.滑动.路由的切换.是否请求接口等),跳转到登录 ...

  8. 20个可用于商业用途的免费 CC0 授权的高分辨率图库

    如今国人已经越来越重视版权了. 而用CC0 授权的图片不用担心版权的问题,那么什么是CC0授权呢?简单来说就是「公共领域贡献宣告」授权,当创作者在自身作品使用 CC0 授权时,代表于符合法律规定的最大 ...

  9. C&num;-记录一些常见的语法特性

    C#6.0的一些语法 一.Lambda表达式的一些运用 1.在属性.方法中应用 例如常规对属性的赋值: public bool IsNavigation { get { return this._na ...

  10. python 线程&comma;进程28原则

    基于函数实现 from threading import Thread def fun(data, *args, **kwargs): """ :param data: ...

相关文章