我们知道，text-align: center可以使得盒子里面的内容水平居中，但当盒子里面的内容宽度大于盒子宽度时，该属性就会失效。
对于盒子里的内容有具体宽度时，可以通过子绝父相，然后给子盒子设置left:50%，margin-left:-（子盒子宽的一半），这样子盒子就会在父盒子居中了。
子绝父相设置
而对于盒子里面的内容是图片时，该方法明显感觉有弊端，必须要知道图片的宽度，如果要更换图片，要么选择修改margin-left，要么严格要求图片宽度。
通过查资料，发现以下技巧：
给父盒子设置：text-align: center;
给图片设置：margin: 0 -100%;
只需要两行代码就能实现大于父盒子的图片在父盒子中居中显示了。亲测该方法不适用父子都是div盒子。
我们知道，text-align: center可以使得盒子里面的内容水平居中，但当盒子里面的内容宽度大于盒子宽度时...
水平居中 1、行内元素 父元素： 此方法父元素有没有宽度都ok 2、块级元素 需要居中的元素设置宽度 设置css ...
如果图片的宽度大于父元素的宽度，不能使用margin： 0 auto；或text-align：center；来使图...
注意点: 如果图片的宽度大于父元素的宽度, 不能使用margin: 0 auto;或者text-align: ce...
一.水平居中 (1)文本图片行内元素水平居中 2.确定宽度的块级元素水平居中 (3)宽度不定的块级元素水平居中 (...
1.居中布局： 水平居中：子元素于父元素水平居中且其（子元素与父元素）宽度均可变。 inline-block+te...
图片等比拉伸需设置与父元素相同的高或宽{width：100%；/height：100%；} 如果图片的宽度大于父元...
一，居中布局： 1，对于宽度小于父标签的块级标签在父标签中居中或者或者宽度小于行宽的块级元素在本行中居中： mar...
在设置水平居中对齐时：margin:0 auto;发现不生效。原来是父级元素没有设置宽度。 父元素没有设置宽度，那...
实现思路 1、 块元素内容默认居中对齐2、内联元素宽度少于等于父元宽度时，左对齐 效果 案例：
本文标题：图片宽度大于父元素宽度的居中技巧
本文链接：https://www.haomeiwen.com/subject/aedfqktx.html
网友评论