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 =  "http://www.thyswang.com/gw/show/3083.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  = "http://www.thyswang.com/gw/show/3083.aspx"  >  刘根造像碑  </ a  >

                                </  strong >

                              刘根造像碑北魏正光五年（公元…

                          </  span >

                     </  p >

成功样式：