飞龙博客

feilong.org 前端开发教程

浏览器ie层或table居中和Firefox层或table不居中解决方法

飞龙更新于 2008-10-29 08:47 加入书签 CTRL+D 有 80 个朋友来过

相信很多网页设计师朋友在做页面元素比如div层或table表水平居中的时候,碰到这种情况:在ie里面显示是居中的,但是在firefox里就变左对齐了。这是ie与firefox浏览器解析css样式的区别,两者不完全兼容。参考网上资料后,飞龙决定总结一下ie浏览器里层table居中而Firefox浏览器里层table不居中解决方法,修订参考地址在:http://feilong.org/ie-Firefox-div-table-center,与朋友一起交流学习。

一、ie浏览器 层或table水平居中 最低要求
IE中在body中加入text-align:center,即可实现主布局块居中。
body{text-align:center}

二、FIREFOX浏览器 层或table水平居中 最低要求
飞龙现举例如下,分三种css实现方式,以第二种写法的css套用最自由:
#demo{margin:0 auto;}
<div id="demo">
</div>
或者
.demo{width:980px;margin:0 auto;}
<div class="demo">
</div>
或者内联{不提倡}
<div style="width:980px;margin:0 auto;">
</div>

三、因此想要让层或table在ie浏览器和FIREFOX浏览器都水平居中,只能鱼和熊掌兼得之哈。

body{text-align:center}
.demo{width:980px;margin:0 auto;}
<div class="demo">
</div>

id标记样式:
body{text-align:center}
#feilong{width:960px;margin:0 auto;}
<div id="feilong">
</div>

style嵌入样式,飞龙不提倡。

飞龙初发:
2008-10-29 08:47
本文更新网址:
https://feilong.org/ie-firefox-div-juzhong-duiqi

所在目录: 网站开发

新作:

旧文:

  • html css js
  • angular react vue
  • flutter python