图片在DIV中垂直、水平居中
将div的line-height设置与div高度一样,配合text-align:center,可实现在IE中内容垂直水平居中显示。示例如下:
CSS:
- <style type="text/css">
- .ccdiv {
- float: left;
- text-align: center;
- width: 200px;
- height: 200px;
- margin: 5px;
- border: #ccc 1px solid;
- line-height: 200px;
- }
- .ccdiv img {
- border:#666 1px dotted;
- }
- </style>
HTML:
- <div class="ccdiv">fufuok.com<img src="http://img.baidu.com/hi/logo-pb.gif" width="88" height="31" /></div>
- <div class="ccdiv"><img src="http://www.google.cn/images/blogsearch-onebox.gif" width="35" height="35"/> </div>
仅支持IE,图片在div中垂直水平居中的权宜之计,没有文字时需要在图片后面加个空格。
---div+css 水平居中 - div+css 垂直居中 - div中内容水平居中
更好的方法待续……