css 总结 【垂直居中】【图片下方文字】

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>