html css 图片居中

xiaoxiao2026-06-15 8

与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性，基本上就是活脱脱的一个td标签元素了

自己写的一个，图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类，里面div需要引入 jz_in类即可，兼容 ie8，360等

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>  <style > .userinfo_editor {position:absolute;width: 1000px;height: 800px;border:ridge 1px red;left: 0px;top: 10px; } .jz_out{ display: table; } .jz_in {display: table-cell;text-align: center;vertical-align: middle;background-color: #FFFFFF; } </style> </head> <body> <div class="userinfo_editor jz_out"> <div class="jz_in" href="#" target="_blank"> <img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png">sss</div> </div> </div> </body> </html>

以下为网上搜的

方法一：利用定位

HTML结构如：

< div class="box"> < a class="pic-wrap" href="#" target="_blank"> < img src="http://img01.taobaocdn.com/tps/i1/T1LeeNXodaXXXXXXXX-130-150.png"> </ a > </ div >

CSS代码如：

body { margin : 0 ; padding : 0 ; font : 12px / 1.5 tahoma , arial ; } .box { width : 220px ; height : 220px ; border : 1px solid #F30 ; margin : 100px auto 0 ; display : table; } .pic-wrap { display : table-cell ; text-align : center ; vertical-align : middle ; } /*主要针对IE6、7的hack*/ .box { * position : relative ; } .pic-wrap { * width : 100% ; * position : absolute ; * top : 50% ; * left : 0 ; /*继承自body的字体会影响到ie6，设置默认的windows系统字体*/ _font-family : sans-serif ; } .pic-wrap img { * position : relative ; * top : -50% ; * left : 0 ; /*在ie中空文本节点有默认高度*/ vertical-align : middle \ 9 ; /*在ie中，a标签中的img标签默认有蓝色边框*/ border : none \ 9 ; }

方法二：

HTML结构同上,

CSS代码如：

.box { width : 220px ; height : 220px ; border : 1px solid #F30 ; margin : 100px auto 0 ; } .pic-wrap { display : table-cell ; vertical-align : middle ; width : 220px ; height : 220px ; text-align : center ; /*ie6、7不支持display:table-cell*/ * display : block ; * font-size : 192px ; /*字体大小为height*0.783或者height/1.14,这里约为192px*/ _font-family : sans-serif ; /*设置字体，否则在ie6下会有一个像素的偏差*/ } .pic-wrap img { border : none ; vertical-align : middle ; /*由于ie下空文本节点有默认高度，所以设置*/ }

【注意，当在css中设置了body元素字体的话，那么方法二在ie7下会失效的】

最佳方法：

CSS代码如：

body { margin : 0 ; padding : 0 ; font : 12px / 1.5 tahoma , arial ; } .box { width : 220px ; height : 220px ; border : 1px solid #F30 ; margin : 100px auto 0 ; } .pic-wrap { display : table-cell ; vertical-align : middle ; width : 220px ; height : 220px ; text-align : center ; /*ie6、7不支持display:table-cell*/ * display : block ; _font-size : 192px ; + line-height : 220px ; /*设置ie7中空文本节点行高为220px*/ _font-family : sans-serif ; } .pic-wrap img { border : none ; vertical-align : middle \ 9 ; /*由于ie中有默认高度的空文本节点*/ } 相关资源：JS实现图片居中且大小自适应

最新回复(0)

html css 图片居中

自己写的一个，图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类 ，里面div需要引入 jz_in类即可，兼容 ie8，360等

以下为网上搜的

自己写的一个，图片上下居中需要建立两个div 最外侧div 需要引入 jz_out类，里面div需要引入 jz_in类即可，兼容 ie8，360等