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" alt="">
</div>
</body>
-------------------------------------------------------------------------------------
2. img怎么实现水平垂直居中?
1.
.t1{
/* 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; */
}