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水平的，跟在前面的文字后面显示