美文网首页简友广场
图片宽度大于父元素宽度的居中技巧

图片宽度大于父元素宽度的居中技巧

作者: 斯空拂 | 来源:发表于2020-06-30 21:21 被阅读0次

我们知道,text-align: center可以使得盒子里面的内容水平居中,但当盒子里面的内容宽度大于盒子宽度时,该属性就会失效。

对于盒子里的内容有具体宽度时,可以通过子绝父相,然后给子盒子设置left:50%,margin-left:-(子盒子宽的一半),这样子盒子就会在父盒子居中了。

子绝父相设置

而对于盒子里面的内容是图片时,该方法明显感觉有弊端,必须要知道图片的宽度,如果要更换图片,要么选择修改margin-left,要么严格要求图片宽度。

通过查资料,发现以下技巧:

给父盒子设置:text-align: center;

给图片设置:margin: 0 -100%;

只需要两行代码就能实现大于父盒子的图片在父盒子中居中显示了。亲测该方法不适用父子都是div盒子。

相关文章

网友评论

    本文标题:图片宽度大于父元素宽度的居中技巧

    本文链接:https://www.haomeiwen.com/subject/aedfqktx.html