CSS常见的让元素水平居中显现办法（二）

　　3.组合使用主动外边距和文本对齐

 

　　因为文本对齐居中办法有着杰出的向下兼容性，且主动外边距办法也被大多数当代浏览器支撑，所以很多设计师将二者组合起来使用，以期让居中作用得到大极限的跨浏览器支撑：

 

　　body {

 

　　text-align: center;

 

　　}

 

　　#container {

 

　　margin-left: auto;

 

　　margin-right: auto;

 

　　border: 1px solid red;

 

　　width: 168px;

 

　　text-align: left

 

　　}

 

　　可是这始终是个hack，无论如何也算不上完美。咱们仍是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。

 

　　4.负外边距解决计划

 

　　负外边距解决计划远不是仅仅为元素增加负外边距这么简略。这种办法需要同时使用绝对定位和负外边距两种技巧。

 

　　下面是该计划的具体实现办法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边际50%的方位。这样，该容器的左外边距将从页面50%宽度的方位开始算起。

 

　　然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。

　　#container {

 

　　background: #ffc url(mid.jpg) repeat-y center;

 

　　position: absolute;

 

　　left: 50%;

 

　　width: 760px;

 

　　margin-left: -380px;

 

　　}   

 

　　看，没有任何hack！尽管这并不是首选的解决计划，但也是个不错的办法，且适用性极广—甚至在Netscape Navigator 4.x中都没有任何问题，很令人吃惊，不是吗？所以若想得到广泛的浏览器支撑，那么这种办法将会是好的挑选。