absolute元素在text-align属性下的对齐显示

1. absolute元素是否可以响应text-align属性?

众所周知,text-align属性可以有效作用于inline/inline-block水平的元素,那么应用了position:absloute/fixed声明的元素呢?

这里写图片描述

上面效果中的图片就是应用了position: absolute声明,而外部box添加了text-align: center声明

根据这个效果,我们可以认定text-align属性可以有效作用于应用了position:absloute/fixed声明的元素,为什么呢?这不秃子头上的虱子——明摆着嘛!因为父标签应用了text-align: center;,所以图片才可以居中显示的啊,这不说明了一切了吗!

但是,实际上,text-align属性对应用了position:absloute/fixed声明的元素无效!

哦?想必有人会疑问:那为何上面这个例子应用了绝对定位属性的图片居中显示了,而且,每个浏览器下都是“居中”的?

2. 一些现象

2.1 text-align与block水平标签absolute元素

这里写图片描述

这里写图片描述

结果在IE6/IE7浏览器下图片左侧顶着外部box的中间显示,而其他浏览器完全靠左显示,如下截图

这里写图片描述

为何会有这种差异显示?

2.2 text-align与inline水平标签absolute元素

这里写图片描述

这里写图片描述

结果在IE6/7浏览器以及FireFox8浏览器下,张含韵小姐的照片靠着中线对齐显示,而其他IE8+,Chrome或是Opera浏览器都是左边显示,如下截图

这里写图片描述

3. 样式表现解释

在绝对定位系列(二)中多次提到,没有应用left/top等属性值的absolute元素就是个不占据空间的普通元素,又因为包裹性,如果是block水平的,换行显示;如果是inline水平的,跟在前面的文字后面显示。知道了这个,一切都很好理解了

3.1 为何图片居中垂线左对齐显示?

拿part3中第二个例子举例,在FireFox 8下,张含韵小姐的图片左侧沿着容器中垂线对齐显示,为何?想知道答案很简单,我们在img标签前面随便加几个文字,例如“圆蛋”,结果如下

这里写图片描述

哦呵呵,事情一下子好理解了:text-align属性作用的不是absolute元素,而是absolute元素之前的文字而已,因为HTML5下块状元素内部的内联元素被所谓的幽灵节点所作用而导致

在FireFox浏览器,以及貌似IE6/IE7下,标签内似乎有不占据任何空间的匿名文字节点元素,于是,图片就跟在这个“隐形”的节点元素之后显示,而这个节点因为由于受text-align:center;声明影响居中显示了,于是,紧跟其后的inline水平的图片元素就对着中垂线显示了

而其他浏览器,如Chrome浏览器,标签内貌似很干净,因为应用了absolute属性值的图片前面没有可以依靠的元素,因此,左对齐显示了。

4. 验证

上面的解释貌似说得通,最好可以通过一个例子证明就好了

我们使用,例如Chrome浏览器打开上面的页面,会发现图片左对齐显示了,如下

这里写图片描述

点击图片下面的按钮,我们在图片之前添加个小小的 ,结果,神奇的事情发生了,图片一下子水平“居中”对齐显示了,如下缩略图

这里写图片描述

这就充分说明了:text-align属性虽然可以实现absolute元素的水平居中对齐,但是,并不是直接对absolute元素起的作用,而是absolute元素之前的inline/inline-block水平的元素

5. 应用与局限性

实现元素的水平居中,有个很经典的方法就是

这里写图片描述

但是,此方法需要父容器是body,或是是设置了position:relative属性的元素,属性关联一是耗代码,关键是维护易出叉子

从本文的分析来看,实际上,我们可以直接使用margin-left属性,无需left属性以及父标签的position:relative申明就可以实现居中显示效果了(例如图片弹出,页面居中浏览效果)

这里写图片描述

不过,直接的margin方法虽好,但是有两个较大的局限性:

1. 自身宽度需知,否则,得要借助脚本去获取才能实现居中

2. 无法实现block水平元素的水平居中

因此,除了某些特殊的场合,margin+position这种组合的水平居中方式是没有什么用武之地的

那哪些是特殊场合呢?例如,新浪微博或是其他很多网站常有的页面主体右侧的“返回顶部”按钮

这里写图片描述

这个按钮是怎么实现右侧定位的呢?先看看新浪微博的实现方式,小bug查看,发现是我上面提到的经典的left:50% + margin方法,核心CSS如下

这里写图片描述

根据本文的内容,实际上,实现该效果,可以直接使用text-align属性,“返回顶部”直接就主体右侧显示了,无需水平方向定位!

这里写图片描述

这里写图片描述

这里写图片描述

text-align: right;实现的好处是:返回顶部的定位与页面主体宽度无关了。在页面宽度自适应的布局中可以大放异彩!

总结:

1. text-align属性可以有效作用于inline/inline-block水平的元素,至于对absolute等元素,text-align属性作用的不是absolute元素,而是absolute元素之前的文字而已

2. 没有应用left/top等属性值的absolute元素就是个不占据空间的普通元素,又因为包裹性,如果是block水平的,换行显示;如果是inline水平的,跟在前面的文字后面显示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/406889.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue-cli proxy中跨域中pathRewrite配置理解

1. vue本地项目调试线上接口出现跨域问题 2. 通过在 config/index.js 配置文件中找到proxyTable配置项 dev: {// PathsassetsSubDirectory: static,assetsPublicPath: /,proxyTable: {/api: {target: http://XX.XX.XX.XX:8083,changeOrigin: true,pathRewrite: {^/api: /api …

CSS3选择器:nth-child和:nth-of-type之间的差异

1. 深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使用这两类选择器 先看一个简单的实例…

php第一节

一.关于PHP的基本介绍 1.PHP [HyperText perprocessor] : 超文本预处理程序。php是一种动态网站后台技术,是一种解释性的脚本语言。2.php的运行环境:(可分两种)LAMP:Linux Apache MySQL PHPWAMP:Windows Apache My…

CSS3中的display:grid网格布局介绍

1.网格布局(grid): 它将网页划分成一个个网格&#xff0c;可以任意组合不同的网格&#xff0c;做出各种各样的布局; 2.基本概念&#xff1a; 容器和项目&#xff0c;如图所示&#xff1a; <div class"content"><div class"b">1</div>&…

文件逆顺输出到新文件(三种方案)

方法一:利用递归 /*功能&#xff1a;文件以行为单位&#xff0c;逆顺输出到新文件示例&#xff1a;file1.txt为&#xff1a;123456要求逆顺后输出到文件file2.txt&#xff0c;结果为&#xff1a;563412*/#include <stdio.h> #include <string.h>// 递归读取文件 v…

js实现同时提交多个表单

http://www.jb51.net/article/17284.htm两种方法&#xff1a;1.使用ajax异步提交表单。方法简单&#xff0c;jQuery插件等都能实现。2.使用iframe。方法很原始&#xff0c;较麻烦。更多文章&#xff1a;实现同时提交多个form(基础方法) 收集-http://blog.csdn.net/elifefly/art…

海驾学车过程全揭秘——第九篇:科目三集训及考试

科目二考完之后就去约了科目三&#xff0c;当场定了6.1号&#xff0c;6.2号两天集训&#xff0c;6.2号下午考试。 6.1号&#xff0c;中午赶到驾校&#xff0c;在公告栏找到集训车&#xff0c;然后就找个凉快地方等着了。这时候科目二集训的几个同仁又聚到一起了&#xff0c;一个…

微信小程序知识点GET

1. app.json中的pages用来设置小程序包含哪些页面以及页面的路径、window用来设置默认页面的窗口表现形式、tabBar用来设置小程序底部tab的表现 2. app.js中的App()函数用来注册一个小程序&#xff0c;接受的对象参数用来指定小程序的生命周期函数等&#xff0c;注意App()必须…

CSS3 - 新单位vw、vh、vmin、vmax使用详解(附样例)

关于height:100%和height:100vh的区别 像 px、em 这样的长度单位大家肯定都很熟悉&#xff0c;前者为绝对单位&#xff0c;后者为相对单位。CSS3 又引入了新单位&#xff1a;vw、vh、vmin、vmax。下面对它们做个详细介绍。 一、基本说明 1&#xff0c;vw、vh、vmin、vmax 的…

删除两个双向链表中值相同的结点--无空白头结点

有两个双向链表&#xff0c;头指针为&#xff1a;pListA和pListB&#xff0c;要求删除这两个链表中值相同的结点, C语言实现&#xff0c;结点结构如下&#xff1a; struct node // 双向链表结点 {int key;struct node *front, *next; };完整源代码如下&#xff1a; /*功…

Enze Second day

哈喽&#xff0c;很高兴在云和学院又学了一天的新知识&#xff0c;现在&#xff0c;我来继续总结一下今天所学的以及对昨天的一些补充。 变量 • 声明变量的语法格式:–数据类型 变量名;•赋值: 变量名值;变量的命名 •命名规则&#xff1a;–1 必须以“字母”_或符号开头…

财务管理(Finance Management)

财务管理是指企业为实现良好的经济效益&#xff0c;在组织企业的财务活动、处理财务关系过程中所进行的科学预测、决策、计划、控制、协调、核算、分析和考核等一系列企业经济活动过程中管理工作的全称&#xff0c;其主要特点是对企业生产和再生产过程中的价值运动进行的管理&a…

微信小程序组件知识点GET

1. 可滚动视图区域组件scroll-view 在滚动 scroll-view 时会阻止页面回弹&#xff0c;所以在 scroll-view 中滚动&#xff0c;是无法触发下拉刷新事件 onPullDownRefresh&#xff0c;所以如果一定要使用下拉刷新&#xff0c;请使用页面的滚动&#xff0c;而不是 scroll-view &…

搭建一台本地json服务器

1、全局安装json-server(此时不管在哪个目录下面都可以) 2、cd至当前的项目文件夹所在的位置&#xff0c;新建一个文件夹jsonserver 3、在当前目录下运行npm init 4、再次安装运行 npm install json-server --save 5、此时的目录结构 --jsonserver--node_moduies--package-loc…

删除两个双向链表中值相同的结点--带空白头结点

有两个双向链表&#xff0c;空白头结点为&#xff1a;ListA和ListB&#xff0c;要求删除这两个链表中关键字相同的结点, C语言实现&#xff0c;结点结构如下&#xff1a; view plainstruct node // 双向链表结点 { int key; struct …

寻求空间支持

寻求支持.NET Framework 3.5以及SQL Server的空间&#xff0c;最好有本地磁盘读写权限&#xff08;特定数据目录&#xff09;。

判断浏览器版本语句大全

<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 5.0]> 只有IE5.0可以识别 <![endif]--> <!--[if IE 5]> 仅IE5.0与IE5.5可以识别 <![endif]--> <!--[…