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>

成功样式：