流沙无影
2016-09-29 08:46
采纳率: 0%
浏览 6.2k

如何让img在div中居中显示

图片说明
img如图所示
图片说明
div如图所示,我现在要实现的效果是使img的中间部分显示在div中,两者的css如下:

 .detail_wrapper{
    width:100%;
    height:90%;
 overflow:hidden;
 text-align:center; 
}
.detail_pic{
    height:100%;
display: inline-block; 
margin:auto; 
}

请问应该怎样修改

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

16条回答 默认 最新

  • sinat_36274927 2016-09-29 09:04

    你的img没有宽度,这样写没有办法居中的,用定位吧

    打赏 评论
  • qq_30729379 2016-09-29 09:08

    css定位你可以网上找找

    打赏 评论
  • sinat_36274927 2016-09-29 09:10

    这个怎么发不了代码,哭

    打赏 评论
  • sinat_36274927 2016-09-29 09:13
     <div style="height:1000px;background: red;display: flex;align-items: center;justify-content: center;"><img src="1.jpg" alt="" style="display: block;width: 202px;height: 200px;" ></div>
    
    打赏 评论
  • sinat_36274927 2016-09-29 09:15

    我发的代码里面的宽高都可以修改去掉的,我本地图片太大了,所以控制了下宽高,你要是不控制宽高的话就去掉

    打赏 评论
  • xmyf1314 2016-09-29 09:23

    图片无宽,父元素用的百分比,img也可用百分比这样给父元素添加text-align:center才会生效

    打赏 评论
  • fisher-zh 2016-09-29 09:26

    1、直接控制图片的宽和高,用一个相同大小的div包着它,给这个div一个margin:0 auto 即可;
    2、如果不想固定图片的宽高的话就在js中用绝对定位,获取屏幕宽度,图片宽度,然后计算出左边的距离值即可。

    打赏 评论
  • 小飞侠在吗 2016-09-29 11:53

    mg {display:block; margin:0 auto;}

    打赏 评论
  • baibaibeaytiful 2016-09-30 00:56

    left=(divwidth-imgwidth)/2;
    top=(divheight-imgheight)/2;
    样式
    div{position:relative;}
    img{position:absolute;}

    打赏 评论
  • 让爱远航 2016-09-30 06:19

    .div {
    text-align: center;
    border: 1px solid #AAAAAA;
    height: 130px;
    overflow: hidden;
    line-height: 130px;
    _display: block;
    _font-size: 130px;
    _font-family: Arial;
    padding-left: 15px;
    padding-right: 15px;
    }

    .div img {
    max-width: 100%;
    max-height: 130px;
    vertical-align: middle;
    }

     <div class="div">
        <img src="a.jpg" >
    </div>
    
    打赏 评论
  • 陈 俊 刚 2016-10-27 15:30

    你这个图看着感觉很乱啊。用css定位就可以搞定的。。

    打赏 评论
  • Leslie丶 2016-11-01 16:16

    最简单的办法,固定好了宽高,然后定位。

    打赏 评论
  • Heshan220 2016-11-05 05:16
    打赏 评论
  • 真爱相思雨 2016-11-07 02:28

    在图片的样式中写margin来控制,或者在外面的div中写padding

    打赏 评论
  • 陈田田 2016-11-14 06:06

    给图片固定的宽度和高度来实现垂直和水平方向的定位,不建议使用JS来控制。

    打赏 评论
  • 玖森 2016-11-19 01:53

    CSS方法,设置margin:0 auto,js动态获取屏幕宽度高度和元素大小,两个相减取平均值,然后Element.style.left(Top)就可。

    打赏 评论

相关推荐 更多相似问题