chrome居中但ie不居中的解决方法

 

CSS 如何使DIV层水平居中

今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,
网上很多的方法都是介绍用上级的text-align: center然后嵌套一层DIV来解决问题.

可是事实上这样的方法科学吗?

经过网络搜索和亲自实验得出以下结论:
正确的也是对页面构造没有影响的设置如下:
对需要水平居中的DIV层添加以下属性:

复制代码
代码如下:

margin-left: auto;
margin-right: auto;

经过这么一番设置问题似乎解决了,在FF中已经居中了,可是在IE中看竟然还是没有居中!
郁闷了一下午,就是找不出问题所在,还特地比较了网上的文章竟然一模一样.

问题到底出在哪里呢?

感谢网友乐天无用帮忙找出了这个邪门问题的原因.
原来是L-Blog默认没有在HTML前加上DTD,于是IE就以HTML而不是XHTML来解释文档.
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您希望更为严格的XHTML 1.0 Strict或者XHTML 1.1请查阅相关文档.
以上测试均基于Windows XP SP2版IE6和FireFox 1.0最终版.

如何使DIV居中

主要的样式定义如下:

复制代码
代码如下:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明:
首 先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定 时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只
要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中,用背景的方法。举例:

复制代码
代码如下:

body{BACKGROUND: url(logo_w3cn_194x79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"

如何使文本在DIV中垂直居中

如果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:

复制代码
代码如下:

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body >
<div id="center"><p>test content</p></div>
</body>
</html>

说明:
vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。

CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中

复制代码
代码如下:

<style type="text/css" media=screen>
body
{
text-align: center;
}
#a
{
width: 200px;
height: 400px;
background: #000;
}
#b
{
margin-top: expression((a.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #FFF;
}
#c
{
position: absolute;
left: expression((body.clientWidth-50)/2);
top: expression((body.clientHeight-50)/2);
width: 50px;
height: 50px;
background: #F00;
}
</style>
<div id="a">
<div id="b"></div>
</div>
<div id="c"></div>

另一方法:

复制代码
代码如下:

<div style="background:blue;position:absolute;left:expression((body.clientWidth-50)/2);top:expression((body.clientHeight-50)/2);width:50;height:50"></div>

时间: 2024-11-05 14:49:55

chrome居中但ie不居中的解决方法的相关文章

Win7系统chrome 应用商店打不开的解决方法

  Win7系统chrome 应用商店打不开的解决方法 1.首先下载插件;(里面有谷歌浏览器.360浏览器.UC浏览器.猎豹浏览器的插件) 2.下载后将改文件解压,单击右键,选择"解压到当前文件夹"; 3.打开谷歌浏览器,点击右上角的"自定义及控制",然后点击"设置"按钮; 4.点击左侧的"扩展程序",然后将下载好的访问插件拖到浏览器中央即可. 添加完成后我们就可以访问chrome 应用商店了.

Win7系统Chrome浏览器无法显示网页图片的解决方法

Win7系统打开Chrome浏览器浏览网页发现页面无法显示图片,出现这种情况该如何解决?下面小编为大家带来Win7系统Chrome浏览器无法显示网页图片的解决方法.一起去看看吧! 方法一: 1.清理缓存1.启动Chrome浏览器,然后单击浏览器右上角按钮,选择"工具"-"清除浏览数据": 2.在弹出的窗口中将"清除指定时间内的数据"选择"全部"并将下方的"清空缓存"勾选上,最后单击底部的"清除浏览

在firefox和Chrome下关闭浏览器窗口无效的解决方法

 首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的,但是可以通过一些特殊的手段进行关闭 首先IE是可以通过window.close()来关闭浏览器窗口的,但是在firefox和Chrome下是无效的.    原因在于:    Firefox下默认设置是无法通过脚本来关闭浏览器窗口的,为的是防止恶意脚本注入,    所以调整的方式就是在url地址栏中输入about:config,    然后在配置列表中找到 dom.allow_scri

Google浏览器CSS居中兼容问题完美解决方法

在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中可是在谷歌浏览器查看时就出现无法居中的BUG,下面的解决方法有类似情况的朋友可以参考下   div做的界面时,又出现CSS hack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线 _ IE6优先识别,!important 仅火狐firefox浏览器识别.可是在谷歌浏览器查看时,就出现兼容Google浏览器的BUG了,无法居中. 现在向

IE下margin:0 auto不居中解决方法

正常情况下需要将div居中显示时,使用Css样式:margin:0 auto即可,但有时使用margin:0 auto后在FF.Chrome里能居中,而在IE678里不居中的现象. 如下代码: margin: 0 auto 内容居中显示 解决方法一 可以是对网页主体声明文本居中,即body{text-align:center} 即: margin: 0 auto 内容居中显示 ### 解决方法二 其实和解决方法一差不多,只是在要居中的div外层添加多一个div,并使其居中 即: margin:

Win7系统桌面背景图片无法居中的解决方法

  我们身边使用电脑的朋友,基本上都会把自己的电脑图片背景设置为喜欢的图片,win7系统的用户也是一样的,这是为了让桌面变的更美观,大家在设置的时候一般情况下都是会把图片居中,让图片看起来比较的均匀,但是发现居中不能使用,是怎么回事呢,换了一张图片试试还是不行,那么设置背景图片无法居中的解决方法是怎么操作的呢,不知道的就跟着小编一起来解决吧! 换桌面背景不能居中的解决方法如下: 1.大家鼠标在桌面空白处右键点击,出现一个菜单选项,选择里面的个性化选项打开,打开后弹出一个新的窗口. 2.弹出打开的

messagebox相对于div层居中解决方法

messagebox相对于div层居中解决方法 public void wndprocret(object sender, wndprocreteventargs e)         { switch (e.cw.message)             {                 case wndmessage.wm_initdialog:                 case wndmessage.wm_unknowinit:                     user3

jquery.uploadify插件在chrome浏览器频繁崩溃解决方法

 这篇文章主要介绍了jquery.uploadify插件在chrome浏览器频繁崩溃解决方法,十分的实用,遇到相同问题,需要解决的朋友可以参考下     jquery.uploadify插件在chrome浏览器频繁崩溃问题,一直困扰了好久,网上很多人说是由于chrome缓存的原因,插件初始化时,需要引用js,而chrome的缓存导致没有没有请求到jquery.uploadify-3.1_min.js,所以引起崩溃,可以在引用js时,加入随机数:<script type="text/java

win8系统Chrome无法设置默认浏览器解决方法

虽然说IE10很优秀,但萝卜青菜各有所爱,例如Win8迷就喜欢谷歌的Chrome浏览器,各种同步!在Windows 8消费者预览版中Chrome无法设置默认浏览器,解决方法:需要鼠标移动到屏幕右上角 – 设置 – 通过控制面板 – 默认程序 – 设置默认程序 – 选择Chrome – 将此程序设置为默认值,才能解决!其它浏览器或者播放器同理.

解决“只能通过Chrome网上应用商店安装该程序”的方法

某些用户在Chrome插件网下载了Chrome插件后,不知道怎么才能把它安装到Chrome浏览器中,用户可以根据本站提供的教程:怎么在谷歌浏览器中安装.crx扩展名的离线Chrome插件?把下载后的扩展名为crx的Chrome插件安装到谷歌浏览器中. 但是,由于一些特殊原因,极个别Chrome插件在使用上述的安装方法的时候,Chrome会提示"只能通过Chrome网上应用商店安装该程序",如图所示: 为此Chrome插件网为用户带来一种解决方法来解决上述问题,具体的操作方法如下: 1.