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

最新推荐文章于 2022-06-10 13:42:53 发布

IT1125275074

最新推荐文章于 2022-06-10 13:42:53 发布

阅读量204

点赞数

原文链接：http://www.cnblogs.com/ccnNL/p/8541834.html

版权

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怎么实现水平垂直居中？

.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; */

}

转载于:https://www.cnblogs.com/ccnNL/p/8541834.html

IT1125275074

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1.解决自适应布局中div内部img距离底部4px的空白问题？2. img怎么实现水平垂直居中？...

1.解决自适应布局中div内部img距离底部4px的空白问题？示例代码： <style> .t1{自适应布局，外层盒子不给宽高（由内部元素撑开） } img{ /* vertical-align:bottom; */ 1.设置img vertical-align：bottom /* display:block; */　　　...
复制链接

扫一扫