CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示
慕课网上的HTML/CSS教程
http://www.imooc.com/view/9
其中有三种方法
第一种是加入table标签
任务是实现div元素的水平居中,
初始代码如下
- <div>
- 设置我所在的div容器水平居中
- </div>
使用table标签实现的代码如下
- <table>
- <tbody>
- <tr><td><div>
- 设置我所在的div容器水平居中
- </div>
- </td></tr>
- </tbody>
- </table>
第二种方法是将其设置为内联元素,通过父类来修改
即在上面的初始代码里添加类来实现居中
- <div class="wrap">
- 设置我所在的div容器水平居中
- </div>
css代码
- <style>
- .wrap{text-align:center;}
- </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层的居中。】
给出的代码如下
- <html>
- <head>
- <meta charset="utf-8">
- <title>不定宽块状元素水平居中</title>
- <style>
- .container{
- float:left;
- position:relative;
- left:50%
- }
- .container ul{
- list-style:none;
- margin:0;
- padding:0;
- position:relative;
- left:-50%;
- }
- .container li{float:left;display:inline;margin-right:8px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <ul>
- <li><a href="#">1</a></li>
- <li><a href="#">2</a></li>
- <li><a href="#">3</a></li>
- </ul>
- </div>
- </body>
- </html>
先不用管其中的float:left
上面的代码先来分析style部分,为了直观的展现出left:50,left:-50,在每个类中添加border,如下
- <style>
- .container{
- float:left;
- border:2px red solid;
- position:relative;
- left:50%
- }
- .container ul{
- list-style:none;
- border:2px blue solid;
- margin:0;
- padding:0;
- position:relative;
- left:-50%;
- }
- .container li{float:left;display:inline;margin-right:20px;
- border:2px green solid;
- }
- </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中不定宽块状元素的水平居中显示的更多相关文章
- html+css--水平居中总结-不定宽块状元素方法(三)
来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...
- html+css--水平居中总结(不定宽块状元素方法)(一)
来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度 ...
- div+css实现未知宽高元素垂直水平居中
div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...
- CSS之文本溢出隐藏,不定宽高元素垂直水平居中、禁止页面文本复制
1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...
- html+css-水平居中-不定款块状元素方法(二)
来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...
- html+CSS--水平居中设置(定宽块状元素)
来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...
- 【css】主要的块状元素(block element)和内联元素(inline element行内元素)
内联元素:只在行内发生作用,设置宽高不起作用,不会影响文字内容,使其换行等.竖直方向和间距也不起作用 display可以强制转换行内元素和块状元素,还可以取消显示none 块元素(bloc ...
- css中固定宽高div与不固定宽高div垂直居中的处理办法
固定高宽div垂直居中 如上图,固定高宽的很简单,写法如下: position: absolute; left: 50%; top: 50%; width:200px; height:100px; m ...
- css中的流,元素,基本尺寸
流 元素 基本尺寸 流之所以影响整个css世界,是因为它影响了css世界的基石 --HTML HTML 常见的标签有虽然标签种类繁多,但通常我们就把它们分为两类: 块级元素(block-level e ...
随机推荐
- [LeetCode] Reconstruct Itinerary 重建行程单
Given a list of airline tickets represented by pairs of departure and arrival airports [from, to], r ...
- [LeetCode] Add Digits 加数字
Given a non-negative integer num, repeatedly add all its digits until the result has only one digit. ...
- vim
visual mode : insert : ctrl + v select line shift + i key word Esc
- Base64原理解析
一. Base64编码由来 为什么会有Base64编码呢?因为有些网络传送渠道并不支持所有的字节,例如传统的邮件只支持可见字符的传送,像ASCII码的控制字符就 不能通过邮件传送.这样用途就受到了很大 ...
- AC自动机 HDU 2222
t n个字串 1个母串 求出现几个字串 字串可能重复 #include<stdio.h> #include<algorithm> #include<string.h> ...
- Redux原理(一):Store实现分析
写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何管理stat ...
- javascript-style-guide
/* 1.类型types 原始值:存取直接作用于它自身 string number boolean null undefined var foo=1; var bar=foo; bar=9; cons ...
- javascript操作字符串的方法
string.indexOf()//返回字符串中第一个与给定子串匹配的子串序号字符串的IndexOf()方法搜索在该字符串上是否出现了作为参数传递的字符串,如果找到字符串,则返回字符的起始位置 (0表 ...
- JavaScript系列文章:不能不看的数据类型检测
由于JavaScript是门松散类型语言,定义变量时没有类型标识信息,并且在运行期可以动态更改其类型,所以一个变量的类型在运行期是不可预测的,因此,数据类型检测在开发当中就成为一个必须要了解和掌握的知 ...
- ubuntu10.04配置XMAPP中的环境变量
1. 显示环境变量:[root@localhost ~]# echo $PATH/usr/kerberos/sbin:/usr/kerberos/bin:/usr/local/sbin:/usr/lo ...