首页 > 代码库 > 高宽不定图片水平垂直居中
高宽不定图片水平垂直居中
图片水平垂直居中的两个常用方法:
1、Table-cell。
IE8+及标准浏览器利用display:table-cell让容器以表格元素的方式呈现,配合vertical-align和text-align实现内部图片水平垂直居中。
IE67不支持display:table-cell,可用font-size,值为容器的0.875倍做hack。
html,body,p, div { margin: 0; padding: 0; } .wrap { height: 300px; width: 300px; border: 1px solid #ccc; } .wrap { display: table-cell; /* IE8+及标准浏览器识别,让div以表格元素的方式呈现,目的在于配合vertical-align*/ vertical-align: middle; /* IE8+及标准浏览器识别,内容垂直居中 */ text-align: center; /* 内容水平居中 */ *display: block; /* IE67识别,保证父级容器为块元素 */ *font-size: 262px; /* IE67hack,以font-size的方式来实现vertical-align的效果值为父高的0.875倍 */ *font-family: Arail; /* 防止非UTF-8编码造成hack失效 */ } .wrap img {vertical-align: middle;} /* IE67识别,图片矫正垂直,配合font-size */
<div class="wrap"> <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" /> </div>
这个方法的缺点很明显,依赖于table-cell,由于table-cell需要在文档流内才能发挥效用,若父容器(wrap)需要position:absolute或者float,则此方法失效。
2、button嵌套
button本身的内容是自动水平垂直居中的,此点上无兼容性问题,让button包含图片,图片不需要任何特殊处理即可水平垂直居中,算是皆大欢喜,记得button要禁用。
html,body,p, div { margin: 0; padding: 0; } .wrap button { height: 300px; width: 300px; border: 1px solid #ccc; background: none; }
<div class="wrap"> <button disabled="true"> <img src="http://static.vas.pptv.com/vas/g/games/v_20130712105432/images/logo.png" /> </button> </div>
这个方法比第一个方法代码更简洁,兼容性更好,html结构上多了一层标签,如果只是作为CSS呈现,算是比较好的方法。
但是在IE下,由于image包含在了button当中,用户能触发交互的只有button,不能直接由用户触发绑定在image上的事件,解决的办法,让button去处理image上的句柄。标准浏览器没有这个问题。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。