图片宽度大于父元素宽度时如何水平居中

Posted juqian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片宽度大于父元素宽度时如何水平居中相关的知识,希望对你有一定的参考价值。

1. 定位流:对图片进行定位

.img{
  position:absolute;
  left:50%;
  margin-left:-20px;/*值为图片宽度的一半*/
}

 这种方法不多说...但是这种方法有个弊端:就是必须知道图片的宽度;

2.重点来咯****奇淫技巧****

.img{
   margin:0 -100%;    
}

 注:此方法必须 父元素必须设置 text-align:center;

    

以上是关于图片宽度大于父元素宽度时如何水平居中的主要内容,如果未能解决你的问题,请参考以下文章

宽度不固定元素水平居中

水平居中设置

图片宽度溢出父元素,居中

使锚标记填充父 flex 元素的 100% 高度和宽度,同时垂直和水平居中

不固定宽度 浮动元素实现 水平居中

元素水平居中