不确定宽高div内照片竖直垂直居中的css款式

日期:2021-03-07 类型:科技新闻 

关键词:在线编辑图片,什么软件可以抠图,在线图片,p图软件电脑版,在线抠图

最简易的方式莫过度设定外层元素的css特性:

拷贝编码
编码以下:

div{
display: table-cell;
}

可是IE6/7其实不适用这个css款式,以便适配它们能够选用下面的方式。

html的构造以下:

拷贝编码
编码以下:

<div><span></span><img src="test.png" alt=""></div>

css编码以下:

拷贝编码
编码以下:

div{
width: 100px;
height: 100px;
border: 1px solid #ccc;
}
span{
line-height: 100%;
vertical-align: middle;
display: inline-block;
height: 100%;
}
img{
width: 100%;
vertical-align: middle;
}

根据设定以上特性能够做到下图的实际效果,照片在div中竖直垂直居中。
 
这个方式的基本原理是在img标识前面插进1个空的span标识,运用它来撑开div内的行高到100%。
上一篇:英语.mobi【价钱 服务 企业】 返回下一篇:没有了