首页 > 代码库 > img标签在div里上下居中
img标签在div里上下居中
方法一：图片尺寸未知，IE8-不支持
CSS部分：<style>.content{ width:500px; height:500px; border:1px solid black; position:relative;}</style>DOM部分：<div class="content"><img src="http://static.cnblogs.com/images/adminlogo.gif" style="margin-top:auto;margin-bottom:auto;top:0;bottom:0;position:absolute"/></div>
方法二：图片尺寸已知，正负margin抵消
CSS部分：<style>.content{ width:500px; height:500px; border:1px solid black; position:relative;}</style>DOM结构：<div class="content"><img src="http://static.cnblogs.com/images/adminlogo.gif" height=164 style="margin-top:-82px;top:50%;position:absolute"/>//margin-top:-imgheight/2</div>
方法三：图片尺寸未知，table-cell属性，IE8-不支持
CSS部分<style>.content{ width:500px; height:500px; border:1px solid black; display:table-cell; vertical-align:middle}</style>DOM部分<div class="content"><img src="http://static.cnblogs.com/images/adminlogo.gif"/></div>
方法四：图片大小未知，背景图片
CSS部分<style>.content{ width:500px; height:500px; border:1px solid black; background:url(‘http://static.cnblogs.com/images/adminlogo.gif‘) center no-repeat;}</style>DOM部分<div class="content"></div>
方法五：利用IFC，创建一个IFC的环境，让行框的高度是包含块的高度的100%，让行框内部的元素使用vertical-align：middle，就可以实现垂直居中。因此，我们可以在行框中插入一个高度100%的inline-block元素，把整个行框撑高直到包含块的100%。见http://www.cnblogs.com/aaron-shu/p/4101198.html
img标签在div里上下居中
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。