1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?

Posted 菜菜鸟~NL

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?相关的知识,希望对你有一定的参考价值。

1.解决自适应布局中div内部img距离底部4px的空白问题?

示例代码:

<style>
.t1{
自适应布局,外层盒子不给宽高(由内部元素撑开)
}

img{
/* vertical-align:bottom; */     1.设置img vertical-align:bottom
/* display:block; */     2.img 变成块级元素 display:block;  变成块级元素就无法在父元素设置可继承的text-align:center等了,而是使用 margin:xx auto;  水平居中


</style>

<body>
   <div class="t1">
  <img src="./TIM截图20171211210255.png" >
  </div>

</body>

 

-------------------------------------------------------------------------------------

2. img怎么实现水平垂直居中?

    1.

.t1{
/* width: 100px;
height: 100px; */
/* display:table-cell; */     //父元素添加:display:table-cell  text-align:center   vertical-align:middle
/* text-align:center;
vertical-align:middle; */

 


/* position:relative; */      //或者父元素相对定位  子元素绝对定位
}

img{
/* position:absolute;
left:50%;
top:50%;


-webkit-transform: translate(-50%,-50%);     //transform margin 二选一即可
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
margin-left:-30px;
margin-top:-30px; */

}

 

以上是关于1.解决自适应布局中div内部img距离底部4px的空白问题?2. img怎么实现水平垂直居中?的主要内容,如果未能解决你的问题,请参考以下文章

网页自适应布局方案

如何实现内部div的高度自适应外部的div

布局:上下两个div高度固定,中间自适应

自适应布局上的垂直自适应图像对齐

vue中的可编辑div实现高度自适应

关于div包裹imgiframe等标签会多3px或4px的问题