原始碼如下：

顯示部分：

想要讓圖片居中首先得把圖片和文字部分用“塊”分開，我的思路是把 <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是不行的）。

成功樣式：