IE6下图片和文字在DIV中垂直居中对齐的有关问题

2012-03-20

IE6下图片和文字在DIV中垂直居中对齐的问题在一个div中有图片和文字，我想让图片和文字都垂直显示在DIV中，

IE6下图片和文字在DIV中垂直居中对齐的问题
在一个div中有图片和文字，我想让图片和文字都垂直显示在DIV中，在IE7\8和FF下都有效果，但是在IE6下就是不行，大家看看我的代码：

HTML code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">  .a{ width:300px; height:30px; line-height:30px; font-size:12px; border:1px solid #090;}</style></head><body><div class="a">   <img src="images/txt_bg2.gif" width="12" height="8" style="vertical-align:middle"/>   <span>这里是文字</span></div></body></html>

[解决办法]
IE6对行内元素里的图片处理很有意思，建议转换为块级元素再试

display:block;
[解决办法]

HTML code

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">  .a{width:300px; height:30px; line-height:30px; font-size:12px; border:1px solid #090;}</style></head><body><div class="a">   <img src="http://www.csdn.net/ui/images/gongshang_logos.gif" width="12" height="8" style="vertical-align:middle"/>   <span style="display:inline-block">这里是文字</span></div></body></html>
[解决办法]
探讨
HTML code<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type" content="text/html; charset=utf-8"/><title>无标题文档</title><styletype="text/css">
  .a{width:300px; height:30px; line-height:30px; font-size:12px; border:1px solid #090;}</style></head><body><divclass="a"><imgsrc="http://www.csdn.net/ui/images/gongshang_logos.gif" width="12" height="8" style="vertical-align:middle"/><spanstyle="display:inline-block">这里是文字</span></div></body></html>

热点排行

CSS

IE6下图片和文字在DIV中垂直居中对齐的有关问题