网站开发 明细,网站的专题模板制作软件,深圳网站设计 建设首选深圳市,百度投诉中心人工电话1. absolute元素是否可以响应text-align属性#xff1f;
众所周知#xff0c;text-align属性可以有效作用于inline/inline-block水平的元素#xff0c;那么应用了position:absloute/fixed声明的元素呢#xff1f; 上面效果中的图片就是应用了position: absolute声明#…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浏览器下张含韵小姐的照片靠着中线对齐显示而其他IE8Chrome或是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水平元素的水平居中
因此除了某些特殊的场合marginposition这种组合的水平居中方式是没有什么用武之地的
那哪些是特殊场合呢例如新浪微博或是其他很多网站常有的页面主体右侧的“返回顶部”按钮 这个按钮是怎么实现右侧定位的呢先看看新浪微博的实现方式小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水平的跟在前面的文字后面显示
