a标签下图片居中

a标签下图片居中

源代码如下：

显示部分：

想要让图片居中首先得把图片和文字部分用“块”分开，我的思路是把 <a> 改造为块儿（添加： ”display : table-cell;” 属性），然后就加入其他居中的代码（ ” vertical-align: middle ;width : 110px; height: 84px; line-height :84px ;text-align : center; border: 1px solid #eee;” ），别忘了在 <img> 中加入” display :invertical-align : middle;” 属性。加过之后图片是能够正常居中显示了，可是对图文结构有所破坏，如图：  。

于是试着在<a> 的属性中加入 ”float:left;” 属性，但是结果是图片的居中就失效了。最后迫不得已在 <a> 标记的外面又加入一个属性 <span style=” float:left;”> 这才达到想要的效果（注意：一定要用 span 这种非块的标记，用 div是不行的）。

成功代码： <  p   class  = "l"  >                           <  span   style  =" float  :  left ;"  >                                 <  a   style  =" display  :  table-cell ;  vertical-align :  middle  ; width  :  110px ;  height :  84px ;  line-height  : 84px  ; text-align  :  center ;  border :   1px solid #eee ; "  target  = "_blank"  href =  ".aspx"  >                                       <  img   style  =" width  :  110px ;  height :  35.42px  ; margin-right  :  auto ;  display :  invertical-align :  middle  ;"  src  = "%E5%A4%A9%E6%85%A7%E8%89%BA%E6%9C%AF%E7%BD%91_files/201411251344250625.JPG" class =  "ThumbnailPic110_84"  >                                 </  a >                           </  span >                           <  span   class  = "l"  >                                 <  strong >                                       <  a   target  = "_blank"  href  = ".aspx"  >  刘根造像碑  </ a  >                                 </  strong >                               刘根造像碑北魏正光五年（公元…                           </  span >                      </  p >

成功样式：