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

《图片文字在div中垂直居中的3种方法.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、个人收集整理勿做商业用途代码如下:〈style〉。pro_a01｛width:100px;height:200px;border:2pxsolidred；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_s

2、01{display：table-cell;width：200px；height:200px;vertical—align：middle；overflow：hidden;}。pro_s01img｛max-width:200px;｝.pro_s02｛border：1pxsolid#FF0000;width：220px;height:200px；line—height：200px;display：block；｝.pro_s02img{max—width:200px；vertical-align：middle;display

3、:inline；}〈/style〉〈bodyleftmargin=”0”〉〈ahref="#”style="display：block；width:200px;height：200px;overflow：hidden;padding：10px；border:1pxsolidred;"〉padding不隐藏超出的图片

4、_a01">〈imgsrc=”pro_01。jpg"alt=”"/>〈/span〉〈br>方法2.垂直居中，外层display:block；高和行高一样，height:200px;line—height：200px;内层图片加个vertical—align：middle,（要显示为行内元素，display:inline,或display:inlin

5、e-block；）;〈spanclass=”pro_s02"〉aa

6、置固定则分配尺寸，尺寸固定边会分配margin，都是自适应的。〈divstyle=”width:300px;height：300px;border：1pxsolidred；position:relative；”〉〈imgsrc=”pro_01.jpg”alt=""style="position:absolute;display：block;margin：auto；left:0px；right:0；top:0;bottom:0;”/>〈/div>效果图：个人收集整理勿做商业用途