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

更新日期: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中都没有任何问题,很令人吃惊,不是吗?所以若想得到广泛的浏览器支撑,那么这种办法将会是好的挑选。


标签:
将文章分享到..