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

2010-09-26

826

宜兴科技提供中高端网站制作服务

　　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中都没有任何问题，很令人吃惊，不是吗？所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。

声明：文章来源于互联网！

企业名称： 嘉兴方案网

联系电话： 13396739763 13136206268 （节假日均可拨打） 0573-83698396 （周一至周六可拨打）

售前咨询QQ：

技术支持QQ：

所在地址：浙江省嘉兴市城南路1539号创业大厦