宽度不定的元素居中~

之前讨论的几种居中方法都是要求元素宽度一定: 但很多时候会是width:auto;的而需要我们居中此元素; 这里稍微研究了下width:auto;的auto计算相关问题:
  • position:relative|static:基于父容器宽100%计算,即宽度尽可能大;
  • position:absolute||float:left|right:||display:inline-block基于子元素宽度计算,即宽度尽可能小;
由此我们就可以得到如下办法来水平居中:
直接应用left|right的50%,需要修正才能达到居中,这里利用第二种auto的计算,使得.child在计算left:-50%时能根据自己同类本身的最大宽度计算,由于使用relative定位,不会影响原来的定位结构~
宽度小的元素
宽度更大的元素
posted @ 2011-04-19 00:56  Defims  阅读(139)  评论(0编辑  收藏  举报