我们知道,text-align: center可以使得盒子里面的内容水平居中,但当盒子里面的内容宽度大于盒子宽度时,该属性就会失效。
对于盒子里的内容有具体宽度时,可以通过子绝父相,然后给子盒子设置left:50%,margin-left:-(子盒子宽的一半),这样子盒子就会在父盒子居中了。

而对于盒子里面的内容是图片时,该方法明显感觉有弊端,必须要知道图片的宽度,如果要更换图片,要么选择修改margin-left,要么严格要求图片宽度。
通过查资料,发现以下技巧:
给父盒子设置:text-align: center;
给图片设置:margin: 0 -100%;
只需要两行代码就能实现大于父盒子的图片在父盒子中居中显示了。亲测该方法不适用父子都是div盒子。

网友评论