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>