关于vertical-align实现图片垂直居中
2016-04-07 19:30
357 查看
有时候我们会遇到多个不同大小图片排列居中的情况,但是图片大小不一致,又不希望通过给图片设定固定宽高来改变图片大小时,来给图片实现垂直居中的效果,这时候用相对定位就不大方便了,用vertical-align可以来实现图片垂直居中的效果。
举个栗子
Html
CSS
vertical-align这个属性实现的关键在于,要给他并列一个参照物,栗子中的span就是起参照物的作用,平时用起来还是很顺手的,不过有时候用相对定位能解决的就不需要用这个了~~~
举个栗子
Html
<div> <img src="images/11.gif"> <span></span> </div>
CSS
div{ width: 200px; height: 200px; background-color: red; text-align: center; } span{ width: 0px; height: 200px; vertical-align: middle; display: inline-block; } img{ vertical-align: middle; }
效果如下
vertical-align这个属性实现的关键在于,要给他并列一个参照物,栗子中的span就是起参照物的作用,平时用起来还是很顺手的,不过有时候用相对定位能解决的就不需要用这个了~~~
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 盒子模型
- CSS选择器
- CSS样式优先权
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页
- BS项目中的CSS架构_仅加载自己需要的CSS
- 很不错的 CSS Hack 又学了一招
- 发一个css比较清爽的写法
- CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]
- css布局网页水平居中常用方法
- CSS经典技巧十则第1/2页
- css 兼容性问题this.style.cursor=''hand''
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 欲练CSS ,必先解决IE的一些细节分析
- CSS文字截取功能实现代码