不定宽高div内图片垂直居中的css样式

发布时间:2022-04-14 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了不定宽高div内图片垂直居中的css样式脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
简单的方法莫过于设置外层元素的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中垂直居中。
&nbsp;
这个方法的原理是在img标签前面插入一个空的span标签利用它来撑开div内的行高到100%。

脚本宝典总结

以上是脚本宝典为你收集整理的不定宽高div内图片垂直居中的css样式全部内容,希望文章能够帮你解决不定宽高div内图片垂直居中的css样式所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:不定宽高