建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

IE8中text-align:center偏左的解决办法

时间:2011-03-08 09:19来源: 作者: 点击:
关于text-align:center的应用在不同浏览器显示效果不一样,本文就IE7,IE8,IE9下的不同显示进行说明,并解决IE8下显示偏左问题; 在ie7和一些浏览器下解释为该元素内的元素和文字都居中。 在ie8和ie9等一些浏览器下解释为该元素内的文字居中。 例如: <div style="b

关于text-align:center的应用在不同浏览器显示效果不一样,本文就IE7,IE8,IE9下的不同显示进行说明,并解决IE8下显示偏左问题;

在ie7和一些浏览器下解释为该元素内的元素和文字都居中。

在ie8和ie9等一些浏览器下解释为该元素内的文字居中。

例如:
<div style="border:1px solid red; height: 150px;width: 150px;text-align: center; ">
   <div style="border:1px solid green;height: 100px;width: 100px;"></div>
   你好
</div>

IE7下效果为:


IE8下效果为:

 

可以发现,在ie7下,元素使用了text-align: center;后,里面的div和文字都居中了,

而在ie8下,元素内的文字居中了,但是里面的div元素没有居中。

这种不平衡的方法有两中解决方法。

1是让ie7趋向ie8,就是让ie7下也显示成ie8的效果,元素居左。方法是在里面的元素上加上float:left;就可以了

2是让ie8趋向ie7,就是让ie8下也显示成ie7的效果,元素居中。方法是在里面的元素上加上margin: 0 auto;就可以了。

(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片