text-align属性对position:absloute/fixed的元素无效

text-align属性对position:absloute/fixed的元素无效

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

.center { margin-left: -"1/2个元素宽度"; left: 50%; position: absolute; }

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

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

.center { margin-left: - ("1/2个元素宽度" + 2); position: absolute; }

不过，直接的margin方法虽好，但是有两个较大的局限性： 1. 自身宽度需知，否则，得要借助脚本去获取才能实现居中； 2. 无法实现block水平元素的水平居中

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

新浪微博的返回顶部按钮截图 张鑫旭-鑫空间-鑫生活

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

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

.W_gotop { 
    position: fixed;
    left: 50%;
    margin-left: 476px; /*这个显然经过了计算，且受限于容器宽度值*/
    bottom: 100px;
}

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

您可以狠狠地点击这里：text-align:right声明下的返回顶部定位demo

demo页面返回顶部的定位效果Chrome截图 张鑫旭-鑫空间-鑫生活

核心CSS代码如下：

.sina_backtop_box { text-align: right; }
.sina_backtop { ...; position: fixed; bottom: 100px; }

HTML如下：

<div class="sina_backtop_box">
    &nbsp;<a href="#" class="sina_backtop">返回顶部</a>
</div>

 用来实现兼容性的效果，已经做过解释，不多说。

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