图片文字在div中垂直居中的3种方法.doc

代码如下： style .pro_a01{ width:100px; height:200px; border:2px solid red; display:block; padding:10px; margin-left:10px; background-color:#000; overflow:hidden;display:table-cell;vertical-align:middle;}/*display:table-cell; 内部图片太大会撑开外层*/ /*img{ width:200px;}*/ .pro_s01{ display:table-cell; width:200px; height:200px;vertical-align:middle; overflow:hidden;} .pro_s01 img{max-width:200px;} .pro_s02{ border:1px solid #FF0000; width:220px; height:200px; line-height:200px; display:block;} .pro_s02 img{max-width:200px; vertical-align:middle; display: inline;} /style body leftmargin=0 a href=# style=display: block; width:200px; height:200px; overflow: hidden;padding:10px; border: 1px solid red;img src=pro_01.jpg alt= / padding不隐藏超出的图片 /a 方法1.图片垂直居中,外层display:table-cell; 内部图片太大会撑开外层 所以内部要规定宽： a href=# class=pro_a01img src=pro_01.jpg alt= //a br a href=# class=pro_a01 span class=pro_s01img src=pro_01.jpg alt= //span /abr 方法2.垂直居中,外层display:block; 高和行高一样， height:200px; line-height:200px; 内层图片加个 vertical-align:middle,（要显示为行内元素，display:inline,或display:inline-block;）; span class=pro_s02img src=pro_01.jpg alt= /aa/span 方法3.图片绝对居中div: 外层：position：relative；内层：margin:auto;position：absolute；left:0;right:0;top:0;bottom:0; 原因：原因是，绝对定位的布局取决于三个因素，一个是元素的位置，一个是元素的尺寸，一个是元素的margin值。我要说话 没有设置尺寸和 margin 的元素会自适应剩余空间，位置固定则分配尺寸，尺寸固定边会分配 margin，都是自适应的。 div style=width: 300px;height: 300px;border: 1px solid red; position: relative; img src=pro_01.jpg alt= style=position: absolute; display: block; margin:auto; left:0px;right:0;top:0;bottom:0; / /div 效果图：