更新日期:2024-10-08 16:06:16 文章编辑:网讯互联 浏览次数:37
上一篇我们讲了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中都没有任何问题,很令人吃惊,不是吗?所以若想得到广泛的浏览器支撑,那么这种办法将会是好的挑选。
Date:2024-11-22 Hits:0
Date:2024-11-22 Hits:2
Date:2024-11-21 Hits:7
Date:2024-11-20 Hits:12
Date:2024-11-19 Hits:25
Date:2024-11-13 Hits:30
Date:2024-10-30 Hits:29
Date:2024-10-31 Hits:36
Date:2024-10-09 Hits:40
Date:2024-11-11 Hits:33