首页 > 开发 > CSS > 正文

对未知高度的图片设置垂直居中的方法详解

2024-07-11 08:55:41
字体:
来源:转载
供稿:网友

标准浏览器还是将外部容器#box的显示模式设置为display:table-cell,IE6/IE7是利用在img标签的前面插入一对空标签的办法
201585174249665.jpg (500×400)

但是实际在浏览器中实现起来的效果并不是很完美,由于各浏览器的解析都各不相同,所以在各浏览器都会有1px-3px的偏差。
方法一:

该方法是将外部容器的显示模式设置成display:table,img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样就可以很方便的使用vertical-align象表格元素那样对齐了,当然这只是在标准浏览器下,IE6/IE7还得使用定位。
HTML代码
 

XML/HTML Code复制内容到剪贴板
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表