脚本宝典收集整理的这篇文章主要介绍了不定宽高div内图片垂直居中的css样式,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
最
简单的方法莫过于设置外层元素的css属性:
div{
dis
play: table-cell;
}
但是IE6/7并不支持这个css样式,为了兼容它们可以采用下面的方法。
ht
ML的结构如下:
<div><span></span><
img src="
test.png" alt=""></div>
css代码如下:
div{
width: 100px;
h
eight: 100px;
border: 1px solid
#ccc;
}
span{
line-height: 100%;
vert
ical-align: middle;
display: inline-block;
height: 100%;
}
img{
width: 100%;
vertical-align: middle;
}
通过设置以上属性可以达到下图的效果,图片在div中垂直居中。
&nbs
p;这个方法的原理是在img标签前面插入一个空的
span标签,
利用它来撑开div内的行高到100%。
脚本宝典总结
以上是脚本宝典为你收集整理的不定宽高div内图片垂直居中的css样式全部内容,希望文章能够帮你解决不定宽高div内图片垂直居中的css样式所遇到的问题。
如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。