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>