宽度不定的元素居中~
之前讨论的几种居中方法都是要求元素宽度一定:
但很多时候会是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定位,不会影响原来的定位结构~
宽度小的元素
宽度更大的元素