1. absolute元素是否可以響應(yīng)text-align屬性？

眾所周知，text-align屬性可以有效作用于inline/inline-block水平的元素，那么應(yīng)用了position:absloute/fixed聲明的元素呢？

上面效果中的圖片就是應(yīng)用了position: absolute聲明，而外部box添加了text-align: center聲明

根據(jù)這個效果，我們可以認(rèn)定text-align屬性可以有效作用于應(yīng)用了position:absloute/fixed聲明的元素，為什么呢？這不禿子頭上的虱子——明擺著嘛！因為父標(biāo)簽應(yīng)用了text-align: center;，所以圖片才可以居中顯示的啊，這不說明了一切了嗎！

但是，實際上，text-align屬性對應(yīng)用了position:absloute/fixed聲明的元素?zé)o效！

哦？想必有人會疑問：那為何上面這個例子應(yīng)用了絕對定位屬性的圖片居中顯示了，而且，每個瀏覽器下都是“居中”的？

2. 一些現(xiàn)象

2.1 text-align與block水平標(biāo)簽absolute元素

結(jié)果在IE6/IE7瀏覽器下圖片左側(cè)頂著外部box的中間顯示，而其他瀏覽器完全靠左顯示，如下截圖

為何會有這種差異顯示？

2.2 text-align與inline水平標(biāo)簽absolute元素

結(jié)果在IE6/7瀏覽器以及FireFox8瀏覽器下，張含韻小姐的照片靠著中線對齊顯示，而其他IE8+，Chrome或是Opera瀏覽器都是左邊顯示，如下截圖

3. 樣式表現(xiàn)解釋

在絕對定位系列（二）中多次提到，沒有應(yīng)用left/top等屬性值的absolute元素就是個不占據(jù)空間的普通元素，又因為包裹性，如果是block水平的，換行顯示；如果是inline水平的，跟在前面的文字后面顯示。知道了這個，一切都很好理解了

3.1 為何圖片居中垂線左對齊顯示？

拿part3中第二個例子舉例，在FireFox 8下，張含韻小姐的圖片左側(cè)沿著容器中垂線對齊顯示，為何？想知道答案很簡單，我們在img標(biāo)簽前面隨便加幾個文字，例如“圓蛋”，結(jié)果如下

哦呵呵，事情一下子好理解了：text-align屬性作用的不是absolute元素，而是absolute元素之前的文字而已，因為HTML5下塊狀元素內(nèi)部的內(nèi)聯(lián)元素被所謂的幽靈節(jié)點所作用而導(dǎo)致

在FireFox瀏覽器，以及貌似IE6/IE7下，標(biāo)簽內(nèi)似乎有不占據(jù)任何空間的匿名文字節(jié)點元素，于是，圖片就跟在這個“隱形”的節(jié)點元素之后顯示，而這個節(jié)點因為由于受text-align:center;聲明影響居中顯示了，于是，緊跟其后的inline水平的圖片元素就對著中垂線顯示了

而其他瀏覽器，如Chrome瀏覽器，標(biāo)簽內(nèi)貌似很干凈，因為應(yīng)用了absolute屬性值的圖片前面沒有可以依靠的元素，因此，左對齊顯示了。

4. 驗證

上面的解釋貌似說得通，最好可以通過一個例子證明就好了

我們使用，例如Chrome瀏覽器打開上面的頁面，會發(fā)現(xiàn)圖片左對齊顯示了，如下

點擊圖片下面的按鈕，我們在圖片之前添加個小小的?，結(jié)果，神奇的事情發(fā)生了，圖片一下子水平“居中”對齊顯示了，如下縮略圖

這就充分說明了：text-align屬性雖然可以實現(xiàn)absolute元素的水平居中對齊，但是，并不是直接對absolute元素起的作用，而是absolute元素之前的inline/inline-block水平的元素

5. 應(yīng)用與局限性

實現(xiàn)元素的水平居中，有個很經(jīng)典的方法就是

但是，此方法需要父容器是body，或是是設(shè)置了position:relative屬性的元素，屬性關(guān)聯(lián)一是耗代碼，關(guān)鍵是維護(hù)易出叉子

從本文的分析來看，實際上，我們可以直接使用margin-left屬性，無需left屬性以及父標(biāo)簽的position:relative申明就可以實現(xiàn)居中顯示效果了（例如圖片彈出，頁面居中瀏覽效果）

不過，直接的margin方法雖好，但是有兩個較大的局限性：

1. 自身寬度需知，否則，得要借助腳本去獲取才能實現(xiàn)居中

2. 無法實現(xiàn)block水平元素的水平居中

因此，除了某些特殊的場合，margin+position這種組合的水平居中方式是沒有什么用武之地的

那哪些是特殊場合呢？例如，新浪微博或是其他很多網(wǎng)站常有的頁面主體右側(cè)的“返回頂部”按鈕

這個按鈕是怎么實現(xiàn)右側(cè)定位的呢？先看看新浪微博的實現(xiàn)方式，小bug查看，發(fā)現(xiàn)是我上面提到的經(jīng)典的left:50% + margin方法，核心CSS如下

根據(jù)本文的內(nèi)容，實際上，實現(xiàn)該效果，可以直接使用text-align屬性，“返回頂部”直接就主體右側(cè)顯示了，無需水平方向定位！

text-align: right;實現(xiàn)的好處是：返回頂部的定位與頁面主體寬度無關(guān)了。在頁面寬度自適應(yīng)的布局中可以大放異彩！

總結(jié)：

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

2. 沒有應(yīng)用left/top等屬性值的absolute元素就是個不占據(jù)空間的普通元素，又因為包裹性，如果是block水平的，換行顯示；如果是inline水平的，跟在前面的文字后面顯示

總結(jié)

以上是生活随笔為你收集整理的absolute元素在text-align属性下的对齐显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。