源代码如下:
显示部分:
想要让图片居中首先得把图片和文字部分用“块”分开,我的思路是把 <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
>
成功样式: