1.【垂直居中实现方法】
/* 代码实现: * 设定宽度和高度,父节点为 position:relative; CSS是这样写的: */ .selector { position:absolute;top:50%;。 margin-top:-元素自身高度的一半; }例如:
<div style="position:relative;height:100px;width:100px;border:1px solid #CCCCCC;">
<p style="position:absolute;margin-top:-11px;height:22px;top:50%;">content</p>
</div>
2.图片下方文字(2种写法 dl ul)
<dl style="float:left;">
<dt>
<img width="88px" height="66px" alt="专访韩电黄洪环:2012做强做大冰洗家电" src="http://img.ea3w.com/173/172527.jpg" style="display: block;" />
</dt>
<dd style="width:88px;text-align:center;">
横向评测
</dd>
</dl>
<dl style="float:left;">
<dt>
<img width="88px" height="66px" alt="专访韩电黄洪环:2012做强做大冰洗家电" src="http://img.ea3w.com/173/172527.jpg" style="display: block;" />
</dt>
<dd style="width:88px;">
测四大知名
</dd>
</dl>
------------------------------------------------------------------------------------------------------------------------------------------------------
<ul>
<li style="float:left;">
<a href="#">
<img width="88" height="66" alt="厨房俱乐部" src="http://img.ea3w.com/module/68_module_images/4245.jpg" style="display: block;" />
厨房俱乐部
</a>
</li>
<li style="float:left;">
<a href="#">
<img width="88" height="66" alt="厨房俱乐部" src="http://img.ea3w.com/module/68_module_images/4245.jpg" style="display: block;" />
厨房俱乐部
</a>
</li>
<li style="float:left;">
<a href="#">
<img width="88" height="66" alt="厨房俱乐部" src="http://img.ea3w.com/module/68_module_images/4245.jpg" style="display: block;" />
厨房俱乐部
</a>
</li>
</ul>