div中文字,图片居中对齐,兼容FF、IE
2010-09-29 09:57
225 查看
2010年07月21日 星期三 20:11
垂直居中对table来说是小菜一碟,只需指定单元格为vertical-align: middle即可,但这在css布局中不管用。假设你将一个导航菜单的高度设为2em,然后在css中指定垂直对齐的规则,文字还是会被排到盒的顶部,根本没有什么区别。
兼容FF、IE的图片居中对齐方法;
.aaa {
height: 120px;
width: 120px;
border: 1px solid #009933;
display: table-cell; vertical-align:middle; /* FF中图片垂直居中 */
text-align:center;
}
.aaa img {
vertical-align:middle;
margin-top: expression((120-this.height)/2); /* IE中图片垂直居中 */
}
在div中,文字对齐很好解决,不过图片垂直居中就有点难度了。。。解决文本垂直居中 ,一个line-height 就解决了, 例如:
.div { width: 500px ; height : 200px ; line-height : 200px; background : #F4E9FC;}
图片居中问题 ,这个方法还可以,IE 里浏览正常,不过火狐就不支持了,因为用了 expression例如: css代码如下:
div1 { width: 500px; height: 500px; background : #F4E9FC; text-align: center;}
.div1 img { margin-top: expression((500-this.height)/2); }
html中:
<div class="class1">< img src="图片路径" /></div>
/*非IE的主流浏览器识别的垂直居中的方法*/
<style>
.box {
/*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;
vertical-align:middle;
/*设置水平居中*/
text-align:center;
/* 针对IE的Hack */
*display: block;
*font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {
/*设置图片垂直居中*/
vertical-align:middle;
}
</style>
相关文章推荐
- 纯css完美地解决图片在div内垂直水平居中,兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、
- 关于DIV重叠定位和图片垂直居中问题的研究(兼容FF、IE6、7、8)
- 两种方式让DIV上下左右都居中--经测试兼容IE,FF,Opera,Google Chrome
- DIV 多行文字或图片垂直居中 FF/ IE 6,7,8
- DIV上下左右都居中--经测试兼容IE,FF,Opera,Google Chrome
- 简单的鼠标可拖动DIV 兼容IE/FF
- ie与Firefox(ff) div+css兼容问题
- ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome
- 图片在div中居中对齐
- 不定高在div中垂直居中,完美兼容火狐 IE
- div里面套3个div,居中显示,兼容ie6-8,ff,咋就这么麻烦呢
- js弹出窗口,居中,设定长与宽(兼容ie/ff)
- JS网页图片查看器(兼容IE、FF)可控制图片放大缩小移动
- JS网页图片查看器-可控制图片放大缩小移动|兼容IE、FF
- js右下角弹出可以缩小的框(div),兼容IE,FF
- ie ff兼容 div 失去焦点(以此原理,可以为任何没有onblur/onfocuse的元素添加类似的事件动作)
- 兼容IE和FF的居中弹出窗口
- DIV+CSS IE6/IE7/IE8/FF兼容问题汇总
- ahjesus 获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome
- Div中图片垂直居中与文字对齐