图片垂直水平居中 支持IE6、IE7、IE8、FF等
这个问题其实在之前的table构架的网页里根本不是啥问题，因为table构架的网页，默认就是垂直居中显示。但是细心的朋友可能发现，在DIV构架的容器里面，图片默认都是left top显示的，对于水平居中，都是通用的做法，text-align:center;但是对于垂直居中，可就大不一样了，对于非IE的主流浏览器操作起来用以下代码即可实现：display: table-cell;vertic
·
这个问题其实在之前的table构架的网页里根本不是啥问题，因为table构架的网页，默认就是垂直居中显示。但是细心的朋友可能发现，在DIV构架的容器里面，图片默认都是left top显示的，对于水平居中，都是通用的做法，text-align:center;
但是对于垂直居中，可就大不一样了，对于非IE的主流浏览器操作起来用以下代码即可实现：
display: table-cell;vertical-align:middle;text-align:center;
但是在IE6里面，这个无效，（万恶的IE6处处搞特殊，不过如果你IE不上路子，但是占有99%的市场份额，也就算了，问题是那么多浏览器都在瓜分市场，所以处处得考虑）
针对IE6得写HACK
*display: block;*font-size: 175px;*font-family:Arial;
其中*font-size: 175px;/*约为高度的0.873，200的0.873 约为175*/
其中*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
这些都是放置图片容器的CSS，放置的图片本身也要有CSS
img {vertical-align:middle;}
______________________________________________
完整样式代码如下：
<style>
.box {display: table-cell;vertical-align:middle;
text-align:center;*display: block;*font-size: 175px;
*font-family:Arial;
width:200px;height:200px;border: 1px solid #eee;}
.box img {vertical-align:middle;}
</style>
<div><img src=”你的图片地址” _fcksavedurl=”你的图片地址” /></div>
这样，也就实现了我们所需要的DIV当中图片垂直居中的要求。
转载请注明：爱分享 » 图片垂直水平居中 支持IE6、IE7、IE8、FF等…
原文链接： http://www.ihref.com/read-12952.html
但是对于垂直居中，可就大不一样了，对于非IE的主流浏览器操作起来用以下代码即可实现：
display: table-cell;vertical-align:middle;text-align:center;
但是在IE6里面，这个无效，（万恶的IE6处处搞特殊，不过如果你IE不上路子，但是占有99%的市场份额，也就算了，问题是那么多浏览器都在瓜分市场，所以处处得考虑）
针对IE6得写HACK
*display: block;*font-size: 175px;*font-family:Arial;
其中*font-size: 175px;/*约为高度的0.873，200的0.873 约为175*/
其中*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
这些都是放置图片容器的CSS，放置的图片本身也要有CSS
img {vertical-align:middle;}
______________________________________________
完整样式代码如下：
<style>
.box {display: table-cell;vertical-align:middle;
text-align:center;*display: block;*font-size: 175px;
*font-family:Arial;
width:200px;height:200px;border: 1px solid #eee;}
.box img {vertical-align:middle;}
</style>
<div><img src=”你的图片地址” _fcksavedurl=”你的图片地址” /></div>
这样，也就实现了我们所需要的DIV当中图片垂直居中的要求。
转载请注明：爱分享 » 图片垂直水平居中 支持IE6、IE7、IE8、FF等…
原文链接： http://www.ihref.com/read-12952.html
权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)