还是之前的九宫格练习,今天完善它的时候想把九宫格(div里面的div)居中,先是按搜索到的方案使用margin:0 auto,不起作用。思考了一下,其实根本没必要用margin。
用这个例子来理解一下盒子模型。在div里面,不论是文字还是图片还是div,所有元素都被包含于content里面,元素从左往右,从上往下依次排列,没有元素默认状态下就在content里面居中。要在content里居中,要用到position(定位),这个下次再继续研究。这次我们采用padding来解决。
元素居中并不意味着一定要在content里面居中,只要看起来居中即可。譬如,如果元素位于content的左上,那么我们令content往右下移位适当距离,就可以让元素在文档中居中。所以我们给padding-left和padding-top设置合适的值就可以解决居中问题了。