`

text-align: center; not working in Firefox

    博客分类：
  • css
FirefoxIECSSXHTML.net 
阅读更多

今天做项目时,碰到div下的表格内容不能居中显示。网上查了论坛，发现一个讨论的帖子。(http://geekswithblogs.net/timh/archive/2006/04/19/75606.aspx)。现分享如下：

 

一、提出问题:

    下面这段代码.

<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}
</style>

<div class=container>
	<table>
		<tr><td>Text</td></tr>
	</table>
</div>

   在IE下"Text"居中显示,FF下"Text"靠左显示.

 

二、解决问题:

    方案1：

    

<style type="text/css">
.container{
  text-align: center;
  border: solid 1px blue;
}

table {
	margin-left:auto;
	margin-right:auto;
}
</style>

<div class=container>
	<table>
		<tr><td>Text</td></tr>
	</table>
</div>

 

    方案2：

    

<style type="text/css">
.container{
  text-align:-moz-center; /*FF*/
  #text-align: center; /*IE */
  border: solid 1px blue;
}
</style>

<div class=container>
	<table>
		<tr><td>Text</td></tr>
	</table>
</div>

 

    方案3：

    

<style type="text/css">
.container{
  border: solid 1px blue;
}
</style>

<center>
<div class=container>
	<table>
		<tr><td>Text</td></tr>
	</table>
</div>
</center>

 

 

三、论道摘录:

    

   

     1.

写道
# re: text-align: center; not working in Firefox 5/3/2006 1:44 AM phil

After some research, a better solution is table { margins: auto; }
since table is a block element (apparantly :)

 

     2.

写道
# re: text-align: center; not working in Firefox 7/18/2007 2:18 PM kali_001
I tried this and able to see it in both FF and IE

.centerMyTable{
text-align:-moz-center;
!text-align:center;
}


But You know what, insteand of ! you can put any NON alph-numeric character. I tried with ^ ~ @ # $ % ^ & * ( ) _ + and it worked

Walalalalala

 

    3.

写道
# re: text-align: center; not working in Firefox 10/18/2007 12:42 PM kees
<center> doesn't help you if you try to get you xhtml valid strict 1.0

 

   

分享到：
| 新学一招, 判断一个js对象是不是数组
评论
14 楼 aokunsang 2010-09-29  
ls的头像确实经典啊、我是来看你头像的。
13 楼 driftcloudy 2010-09-25  
LZ确实没搞明白。。。
text-align:center仅仅是让文本居中，但是在IE的奇异模式下，会误认为text-align是一切居中
12 楼 caiceclb 2010-09-25  
text-align:center; 是文本居中，或者说是内联元素的居中，块级不受此影响，有时会这样写是为了兼容IE5-的版本
11 楼 caiceclb 2010-09-25  
设置table {width:100%}
10 楼 wangking717 2010-09-24  
明天的昨天 写道
wangking717 写道
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}


ff表示鸭梨很大


margin: auto; 在FF里可以局中，但是IE不能，所以可以在BODY标签里设置TEXT-ALIGIN让起局中，我测试过，不过任何IE版本以及FF都兼容。
9 楼 pfans 2010-09-23  
这里有详细解释：http://www.w3help.org/zh-cn/causes/RT8003
8 楼 wangchao719 2010-09-23   
<html>
<head>
<style>
body { text-align: center; margin: 0; padding: 0; }
/* margin，padding进行reset */
#wrapper {
  margin:0px auto;
  text-align: left;
  width: 600px;
  height: 700px;
  background: blue;
}
/* 1. 还原成默认的left  2. 如果不加宽度居中没有意义。 */
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
7 楼 明天的昨天 2010-09-21  
wangking717 写道
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}


ff表示鸭梨很大
6 楼 wangking717 2010-09-21  
你可以设置body样式为文本居中，然后再设置边界自动，这样不管是IE还是FF都兼容了。。
body{text-align: center;}
.container{  
  margin: auto;  
  border: solid 1px blue;  
}
5 楼 明天的昨天 2010-09-21  
sohighthesky 写道
lz根本没搞懂问题原因

能说说问题的原因是什么吗? 求点化
4 楼 明天的昨天 2010-09-21  
askjsp 写道
put a table in a div which feeling strangeness

if you only want make the elements abover the div(which means the table) you can do just like this

<table align='center'>

</table>

this must can be work!

have a try!


首先,thanks

put a table in a div which feeling strangeness ??? div用于布局,table用于显示数据,有什么问题吗？

<table align='center'>

</table>    这样是可以的，但是我是从布局层面来考虑问题的。
3 楼 sohighthesky 2010-09-21  
lz根本没搞懂问题原因
2 楼 smildlzj 2010-09-19  
求LS MM联系方式...

哈哈...
1 楼 askjsp 2010-09-17  
put a table in a div which feeling strangeness

if you only want make the elements abover the div(which means the table) you can do just like this

<table align='center'>

</table>

this must can be work!

have a try!
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    在ie7下css居中样式text-align:center;偏左问题解决方法

    复制代码代码如下: body { text-align:center; } 用ie7打开是居左的。 万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中...

    让IE也支持margin居中告别text-align:center

    谨以此篇献给那些和我一样使用 myeclipse 开发，为了在 IE 下居中一直使用 text-align:center 居中的童鞋,接下来介绍让IE也支持margin居中的实现方法

    使用text-align:justify实现两端对齐一例

    Firefox浏览器将中文分割，而Opera浏览器则不会分割中文。Safari浏览器的处理方式类似于Opera浏览器。英文比较容易处理，因为可以使用空格分割单词。 五、结语 使用text-align:justify实现两端对齐是一种常用的...

    margin:0 auto与text-align:center的基本概念及区别介绍

    1.text-align: 属性规定元素中的文本的水平对齐方式; 　该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式; 　一般情况下设置文本对齐方式的时使用此属性。支持值 justify。 　Example: div...

    IE7下当position:fixed遇到text-align:center的解决方法

    IE7下当position:fixed遇到text-align:center 的一些状况，大家可以参考下。

    网页制作代码+课程总结

    text-align:center; float:left; width:90px; } #daohang a{ background-image:url(images/bj01.jpg); display:block; margin:0px; padding-top:10px; padding-right:0px; padding-bottom:13px; padding-...

    text-align:justify实现文本两端对齐 兼容IE

    对于text-align 我们再熟悉不过了，可是它有个justify属性，平时很少用到，就鲜为人知了。justify是一种文本靠两边布局方式，一般应用于书刊杂志排版；合理运用text-align:justify 有时会省去很多开发的时间。 要想...

    DIV CSS常用的网页布局代码

    text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列以下是引用片段：body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-...

    支持.net 心语聊天室系统

    text-align: center; width: 160px; color: #000000; font-family: 宋体; font-size: 10px; font-weight: bold; background-image: url(image/leftmenubg.gif); line-height: 21px; } .contentBg { ...

    H5 jQuery网站右侧悬浮楼层滚动导航代码.zip

    代码片段： ... -webkit-box-align: center;  -ms-flex-align: center;  align-items: center;  color: rgba(0,0,0,0.5);  font-size: 2rem;  min-height: 100%;  height: 100vh; }

    TM-align: a protein structure alignment algorithm

    TM-align: a protein structure alignment algorithm based on the TM-score

    网页特效代码(用户根据自己的选择切换用户登陆界面等特效）

    text-align: center} .out2 { text-align: center} .in,.out2{ font-size: 9pt; color: #66DDDD;border-width:1px;border-style:solid;border-color:0070b0 0090c0 0090c0 0070b0;background:0078b8;cursor:default...

    text-algin:justify实现文本两端对齐方法小结

    最近在写页面的时候遇到了一个问题—当行文本双端对齐，大家都知道CSS属性中有一个“text-align:justify”，但是这个属性使用的时候，要求还是挺多的，尤其是要实现单行文本双端对齐。这篇文章就给大家分享了text-...

    莽荒纪 模板CSS

    text-align:center; color:#956839; border-bottom: 1px solid #BFB186;} .mb20{ margin-bottom:20px;} .booktitle h1{ font-size:24px; font-weight:bold;} .toc{ list-style-type:none;} .toc li{ height:28px; ...

    网站banner图轮播效果 js

    text-align:center; background:#000000; filter:alpha(Opacity=70); Opacity:0.7; font-family:Arial; font-size:11px; color:#999999; cursor:pointer;} .sub_no li.show{background:#ffffff; color:#000000;} ....

    XHTMl 第三章源代码

    text-align:center; } #container{ /* 固定宽度且居中的版式 */ position:relative; margin:0px auto 0px auto; width:800px; text-align:left; background:url(container_bg.jpg) no-repeat bottom...

Magicbox
Global site tag (gtag.js) - Google Analytics